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＃内容占据剩余高度的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＆amp;上方。

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/

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

3 个答案: