我有一个像这样的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完成吗?
答案 0 :(得分: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;}
注意:直到IE8&amp;上方。
答案 1 :(得分:0)
由于您无法设置页脚高度(如您所写) 试试这个:
#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/
答案 2 :(得分:0)
如果你用javascript设置其他div的高度,你可以使用jquery来获取窗口的高度,减去其他2个div的高度,瞧,你剩下正确的数量...... 这应该有助于给你一个想法 http://api.jquery.com/height/