如何使div高度剩余为100%高度?[副本]

该页面有一个标题,其中包含徽标和帐户信息。这可能是任意高度。我希望content 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>

对于content div中的任何内容,请设置 top: 0; header 在…内 content 将不允许此工作。

有没有办法不使用 table ?

部门 高度也将设置为百分比。因此,在 将填充到底。两种元素的比例为50%。

例如,如果页眉占屏幕高度的20%,则表的内部指定为50% #content 将占据40%的屏幕空间。到目前为止,将整个东西包装在一张表中是唯一有效的方法。