使div填充剩余屏幕空间的高度

Z时代
2024-01-10
分类：问答

我正在一个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>

页面的整个高度已填满，不需要滚动。

对于content div中的任何内容，设置top:0;将其放在标题的正下方。有时，内容将是一个实际表，其高度设置为100％。把header里面content不会让这种工作。

是否有一种无需使用即可达到相同效果的方法table？

内容内的元素的div高度也将设置为百分比。因此，内部100％的内容div将填充到底部。两个元素占50％。

例如，如果标题占据屏幕高度的20％，则内部指定为50％的表#content将占据屏幕空间的40％。到目前为止，将整个内容包装在表中是唯一有效的方法。

回答：

2015年更新：Flexbox方法

还有两个简短提及flexbox的答案；但是，那是两年多以前的事了，他们没有提供任何示例。flexbox的规范现在肯定已经确定。

注意：尽管CSS Flexible BoxesLayout规范处于候选推荐标准阶段，但并非所有浏览器都已实现。WebKit实现必须以-webkit-为前缀；Internet Explorer实现了规范的旧版本，并带有-ms-前缀。Opera12.10实施了该规范的最新版本，没有前缀。有关最新兼容性状态，请参见每个属性的兼容性表。

所有主要的浏览器和IE11 +都支持Flexbox。对于IE 10或更早版本，可以使用FlexieJS填充程序。

工作实例

使用flexbox，您可以轻松地在具有固定尺寸，内容尺寸尺寸或剩余空间尺寸的任何行或列之间进行切换。在我的示例中，我设置了页眉以使其与内容对齐（按照OP问题），添加了页脚以显示如何添加固定高度的区域，然后设置内容区域以填充剩余的空间。

html,
body {
  height: 100%;
  margin: 0
}
.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}
.box .row {
  border: 1px dotted grey;
}
.box .row.header {
  flex: 0 1 auto;
  /* The above is shorthand for:
  flex-grow: 0,
  flex-shrink: 1,
  flex-basis: auto
  */
}
.box .row.content {
  flex: 1 1 auto;
}
.box .row.footer {
  flex: 0 1 40px;
}
<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
  <div class="row header">
    <p><b>header</b>
      <br />
      <br />(sized to content)</p>
  </div>
  <div class="row content">
    <p>
      <b>content</b>
      (fills remaining space)
    </p>
  </div>
  <div class="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>