固定高度容器div，灵活的高度内容div

Question

我有这样的html代码：

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

div＃容器的高度是固定的（例如800px）。 在一开始不知道div＃footer和div＃header的大小（通过Javascript设置）。

我希望div＃content占剩余高度的100％。

可以使用CSS完成吗？

Answer 1

对于这种功能，您可以为此使用display：table 。 这样写：

.container{
    display:table;
    height:800px;
    width:100%;
}
.container > div{
    display:table-row;
}
.header{background:red; height:100px;}

.content{background:blue}

.footer{background:green; height:100px;}

检查此http://jsfiddle.net/Rvbk4/

注意：IE8及更高版本才可以使用。

Answer 2

由于您无法设置页脚高度（如您所写）
尝试这个：

#container{
    background : red;
    height:800px;
    min-height:800px
}
#header{
    background : blue;
}
#content{
    background : yellow;
    height:100%
}
#footer{
    background : green;
    //position:absolute;
    position:fixed;
    bottom:0;
    width:100%;
}

和jsfiddle： http ： //jsfiddle.net/AJtxy/1/

Answer 3

如果您使用javascript设置其他div的高度，则可以使用jquery来获取窗口的高度，减去其他2个div和voila的高度，您得到的是正确的数量...这应该有助于您一个想法http://api.jquery.com/height/