使div填充剩余屏幕空间的高度
我正在开发一个Web应用程序，我希望内容能够填满整个屏幕的高度。
该页面有一个标题，其中包含徽标和帐户信息。这可以是任意高度。我希望内容div将页面的其余部分填充到底部。
我有标题div和内容div。目前我正在使用表格进行布局，如下所示：
CSS和HTML
#page {
height: 100%; width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}
<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>
页面的整个高度都已填满，无需滚动。
对于内容div中的任何内容，设置top: 0;将把它放在标题下面。有时内容将是一个真实的桌子，其高度设置为100％。放在header里面content不会允许这个工作。
有没有办法在不使用的情况下达到相同的效果table？
更新：
内容中的元素div也将高度设置为百分比。因此，100％内部的东西div将填充到底部。两个元素也是50％。
更新2：
例如，如果标题占据屏幕高度的20％，则内部指定为50％的表#content将占用屏幕空间的40％。到目前为止，将整个事物包装在表中是唯一有效的方法。
使div填充剩余屏幕空间的高度
慕村9548890浏览 4097回答 4
4回答
-
九州编程
您可以使用CSS表，而不是使用标记中的表。标记<body> <div>hello </div> <div>there</div></body>（相关）CSSbody{ display:table; width:100%;}div{ display:table-row;}div+ div{ height:100%; }FIDDLE1和 FIDDLE2这种方法的一些优点是：1）减少标记2）标记比表更具语义，因为这不是表格数据。3）浏览器支持非常好：IE8 +，所有现代浏览器和移动设备（caniuse）为了完整起见，这里是CSS表模型的等效Html元素到css属性table { display: table }tr { display: table-row }thead { display: table-header-group }tbody { display: table-row-group }tfoot { display: table-footer-group }col { display: table-column }colgroup { display: table-column-group }td, th { display: table-cell }caption { display: table-caption }
随时随地看视频慕课网APP
Html/CSS