实现表格填充剩余视口高度，仅表格容器内垂直滚动

我想让表格填充页面剩余高度，不让浏览器出现垂直滚动条，而是让表格容器自己滚动。参考相关文章后，把表格放在div容器里设置max-height:100%，但没效果。当前代码里，包含表格的行内还有其他元素（比如示例里的<p>标签），表格容器在这些元素下方。

问题原因 #

.row.content是flex布局的弹性项，但它本身不是flex容器，内部元素按普通文档流排列。给#table-container设置max-height:100%时，这个百分比是相对于父元素的内容撑开高度，而非我们需要的"剩余可用高度"，所以滚动逻辑不生效。

解决方案 #

把.row.content改成flex容器，让内部元素垂直分配空间，顶部元素占固定高度，表格容器自动填充剩余区域：

修改后的CSS代码

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.box {
  display: flex;
  flex-flow: column;
  height: 100%;
}

.box .row {
  border: 2px dotted grey;
}

.box .row.header {
  flex: 0 1 auto;
  background-color: deeppink;
}

/* 将content行设为flex容器，垂直排列内部元素 */
.box .row.content {
  flex: 1 1 auto;
  background-color: violet;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* 防止内部元素溢出撑破布局 */
}

/* 让顶部p标签只占自身内容高度 */
.box .row.content p {
  flex: 0 1 auto;
  margin: 0;
  padding: 10px;
}

table,
th,
td {
  border: 1px solid black;
  width: 100%; /* 表格宽度占满容器 */
}

#table-container {
  background-color: yellow;
  flex: 1 1 auto; /* 自动填充剩余高度 */
  overflow-y: auto; /* 内容过多时显示垂直滚动 */
  padding: 0 10px;
}

/* 可选：固定表头，滚动时仅tbody滚动 */
thead {
  position: sticky;
  top: 0;
  background-color: white;
}

HTML代码（无需修改）

<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 id="table-container">
      <table>
        <thead>
          <tr>
            <th>Month</th>
            <th>Savings</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>January</td>
            <td>$100</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
          <tr>
            <td>February</td>
            <td>$80</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>

效果说明 #

修改后，整个页面高度适配浏览器窗口：

• header行仅占自身内容高度
• content行填充剩余页面高度，内部的p标签占固定高度，表格容器自动填充剩下的空间
• 当表格内容过多时，只有表格容器会出现垂直滚动条，浏览器整体不会产生滚动

内容的提问来源于stack exchange，提问作者Hel