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

一尘不染

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

javascript

我正在开发一个 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% 的屏幕空间。到目前为止，将整个东西包装在一张桌子上是唯一有效的方法。

阅读 213

2022-02-08

共1个答案

一尘不染

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

注意：虽然 CSS 灵活框布局规范处于候选推荐阶段，但并非所有浏览器都实现了它。WebKit 实现必须以 -webkit- 为前缀；Internet Explorer 实现了旧版本的规范，前缀为 -ms-；Opera 12.10 实现了最新版本的规范，没有前缀。有关最新的兼容性状态，请参阅每个属性的兼容性表。

（取自https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes）

所有主流浏览器和 IE11+ 都支持 Flexbox。对于 IE 10 或更早版本，您可以使用 FlexieJS shim。

要检查当前支持，您还可以在此处查看： http: //caniuse.com/#feat=flexbox

工作示例

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

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>

2022-02-08