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

Question

我想要实现一个垂直流动的盒子模型。

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

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

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

或者我需要使用Javascript

JS:小提琴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

在大多数浏览器的CSS中，HTML标记也被归类为DOM的一部分。相反，将您的正文样式应用于html，如下所示

html, body { height:100%; }

^^正如马修所说，也打败我吧

Answer 3

如果你希望主体是100%，你必须将html的高度设置为100% (只有在设置了父元素的高度的情况下，100%的高度才有效)：

body,html{
    height:100%;
}

Here就是一个例子。