html - 3 行垂直流体布局，流体高度

Question

我想实现垂直流动的盒子模型

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

当我将 body 的高度指定为 100% 时，它不起作用。

如何在 CSS 中获得垂直流动的解决方案。

或者我需要使用 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%;
}