Make a div fill the height of the remaining screen space

我正在开发一个 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% 的屏幕空间。到目前为止，将整个事物包装在一个表中是唯一有效的方法。

解决方法

使用 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 className="box">
  <div className="row header">
    <p>
      <b>header</b>

      <br />

      <br />(sized to content)
    </p>
  </div>

  <div className="row content">
    <p>
      <b>content</b>

      (fills remaining space)
    </p>
  </div>

  <div className="row footer">
    <p><b>footer</b> (fixed height)</p>
  </div>
</div>

在上面的 CSS 中，flex属性简写了flex-grow、flex-shrink和flex-basis属性来建立弹性项目的灵活性。Mozilla对灵活的盒子模型有很好的介绍。

如果您有什么看法或意见，欢迎通过右边的反馈悬浮框反馈

本文为原创，未经同意授权，禁止任何媒体或个人自媒体以及任何声明式转载

商业侵权必究，如需授权请联系340443366@qq.com

原文链接：https://www.1024nav.com/faq/make-a-div-fill-the-height-of-the-remaining-screen-space

解决方法​

解决方法