html - 固定高度容器div，灵活高度内容div

Question

我有一个这样的html代码：

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

div#container 的高度是固定的（例如 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 的高度，瞧，剩下的数量是正确的......这应该可以帮助你一个想法 http://api.jquery.com/height/