我正在开发一个 Web 应用程序，我希望内容填满整个屏幕的高度。
该页面有一个标题，其中包含一个徽标和帐户信息。这可以是任意高度。我希望内容 div 将页面的其余部分填充到底部。
我有一个 headerdiv和一个 content 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%。到目前为止，将整个东西包装在一张桌子上是唯一有效的方法。
