如何创建无JS、占容器剩余高度的可滚动HTML表格

云原生阿岚

2026-6-18

实现固定布局下的剩余高度可滚动表格

问题描述

在HTML布局中创建可滚动表格，要求表格占据容器的剩余高度，内容超出时仅表格垂直滚动，header、sidebar等其他元素保持固定。具体需求：

表格自动填充父容器剩余空间
仅表格内容过多时滚动
无需手动设置固定高度
不使用JavaScript
仅用纯CSS、Flexbox实现

已尝试为表格容器设置overflow-y: auto，但出现整页滚动或表格无法正确填充空间的问题。

解决方案

你的代码核心问题在于Flex布局的高度约束没有正确传递到表格容器，同时重复设置height:100vh导致布局溢出。以下是修改后的完整代码：

<html>
  <head>
    <title>Learning Flexbox</title>

    <style>
      body {
        margin: 0;
        height: 100vh;
        display: flex;
        flex-direction: column;
      }

      .container {
        display: flex;
        flex-direction: row;
        flex-grow: 1; /* 替换height:100vh，让容器填充body剩余空间 */
        overflow: hidden; /* 防止子元素溢出导致整页滚动 */
      }

      .sidebar {
        width: 250px;
        background-color: #c4adf0;
      }

      .main {
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .header {
        display: flex;
        padding: 10px;
        justify-content: space-between;
        border-bottom: 1px solid #c8c8c8;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
      }

      .searchbox input {
        border: 1px solid #c8c8c8;
        padding: 10px;
      }

      .avatar {
        border-radius: 50%;
        width: 40px;
        height: 40px;
        background-color: #f0c4ad;
      }

      .content {
        padding: 10px;
        padding-top: 20px; /* 替换margin-top，避免高度计算偏差 */
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .table-container {
        overflow-y: auto; 
        flex-grow: 1; /* 让容器填充content的剩余空间 */
      }

      table {
        width: 100%;
        border-collapse: collapse;
      }

      th,
      td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="sidebar">
        <ul class="menu">
          <li><a href="#">Menu 1</a></li>
          <li><a href="#">Menu 2</a></li>
          <li><a href="#">Menu 3</a></li>
        </ul>
      </div>
      <div class="main">
        <div class="header">
          <div class="searchbox"><input type="text" /></div>
          <div class="avatar"></div>
        </div>
        <div class="content">
          <div>
            <h1>Title</h1>
          </div>
          <div class="table-container">
            <table class="table">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>Name</th>
                  <th>Description</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  <td>1</td>
                  <td>John Doe</td>
                  <td>Lorem ipsum dolor sit amet</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jane Smith</td>
                  <td>Consectetur adipiscing elit</td>
                </tr>
                <tr>
                  <td>1</td>
                  <td>John Doe</td>
                  <td>Lorem ipsum dolor sit amet</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>Jane Smith</td>
                  <td>Consectetur adipiscing elit</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>Mike Jones</td>
                  <td>Sed do eiusmod tempor incididunt</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

关键修改说明

修复容器高度传递：将.container的height:100vh改为flex-grow:1，同时给.container和.main添加overflow:hidden，避免子元素溢出导致整页滚动。这样容器会自动填充body的剩余空间，不会出现重复高度导致的布局溢出。
调整内边距避免高度偏差：将.content的margin-top:10px改为padding-top:20px，因为margin会脱离文档流，影响Flex布局的高度计算，改用padding可以保证容器高度的准确性。
让表格容器填充剩余空间：给.table-container设置flex-grow:1，替代原有的max-height:100%。这样表格容器会自动填充.content的剩余空间，当表格内容超出时，overflow-y:auto会生效，仅表格区域滚动。

额外优化：固定表头（可选）

如果需要表头固定不滚动，可以修改表格样式：

.table-container {
  overflow-y: auto; 
  flex-grow: 1;
}

thead {
  position: sticky;
  top: 0;
  background-color: #fff;
}

这样表头会固定在容器顶部，只有表体内容滚动，体验更好。

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

如何创建无JS、占容器剩余高度的可滚动HTML表格

问题描述 #

解决方案 #

关键修改说明 #

额外优化：固定表头（可选） #

问题描述

解决方案

关键修改说明

额外优化：固定表头（可选）