CSS 100% height layout

Question

I know this is a sort of a common problem, and I looked up some solutions, but couldn't find exactly what I was looking for.

I would like to convert this to a tableless layout.

Note: header and footer have to be set to a fixed height in pixels (50px is ok).

The main problem I'm having is that I cannot get that "big box" in the middle to behave like it does when it's done with tables. There are solutions which work OK for a variable length content (text, images), but I would like this box look and behave like a box - with borders, rounded corners and all.

Answer 1

You can do it with table style CSS properties, but still retain table less markup (which is still a win).

Example

HTML

<div id="container">     <div id="header"><div>header</div></div>     <div id="content"><div>content</div></div>     <div id="footer"><div>footer</div></div> </div> 

CSS

html, body {     height: 100%;      padding: 0;     margin: 0; }  #container {     display: table;      width: 100%;     height: 100%;     border: 1px solid red;        text-align: center; }  #container > div {        display: table-row;        width: 100%; }  #container > div > div {        display: table-cell;        width: 100%;     border-radius:10px;   }  #header > div {     height:50px;      border:solid 2px #aaa; }  #content > div {     height: 100%;         background:#f0f4f0;      border:solid 2px #5a5; }  #footer > div {     height:50px;      border:solid 2px #a55; } 

jsFiddle.