3 Row Vertically Fluid Layout, Fluid height

Question

I want to achieve a vertically fluid box model

|-------------|
|             |
|header 20%   |
|=============|
|             |
|             |
|content 60%  |
|             |
|-------------|
|             |
|footer 20%   |
|=============|

When i specify the body's height as 100% it doesnt work.

How do I get a vertically fluid solution in CSS.

Or do I need to use Javascript

JS:fiddle http://jsfiddle.net/EGesW/5/

Answer 1

html {
    height:100%;
}
body{
    height:100%;
}
#header{
    background:#FF9933;
    min-height:20%;
}
#content{
    background:#DDD;
    min-height:60%;
}
#footer{
    background:#138808;
    min-height:20%;
}

Answer 2

the HTML tag is also classed as part of the DOM in CSS on most browsers. instead, apply your body style to the html too like so

html, body { height:100%; }

^^ as matthew said, beat me too it