我觉得我不应该问这么简单的问题,但我找不到任何简单的答案。
我有一个标题,可以是任何高度。它下面的内容需要填充页面上的剩余空间(两者都包含在必要的容器div中)。如何用HTML和CSS实现这一点?我会考虑使用JavaScript,但我希望在添加内容或调整窗口大小等时自动调整大小。
HTML代码:<div id="container" >
<div id="header" >
<br/>
<br/>
...variable content in the header (not necessarily text)...
<br/>
<br/>
</div>
<div id="content"></div>
</div>
CSS代码:#container
{
background-color:blue;
width:100%;
height:100%;
}
#header
{
background-color:green;
width:100%;
height:auto;
}
#content
{
background-color:red;
width:100%;
height:100px; /*The height here needs to fill the remaining space in the container div*/
}
我认为这可能有助于做你想做的事情:http://jsfiddle.net/AGLDV/3/
html, body {
height:100%;
}
#container {
width:100%;
height:100%;
background:#ccc;
display:table;
}
#header {
height:1%;
width:100%;
background:blue;
display:table-row;
}
#content {
width:100%;
background:red;
display:table-row;
}
小提琴
我将标题高度设置为height: auto;
,然后将overflow: hidden;
添加到body, html
样式中。
只要在标题中添加任何文本或<br />
,高度就会改变。