Bootstrap5设置表格25%视口高度并实现右侧表格垂直滚动

布局失效核心是两个点：

• Flex布局下子元素默认min-height: auto，会优先适配内容高度，直接突破父元素设置的高度限制，这也是加了h-25类还是被内容撑开的核心原因
• 重复给container-fluid和内部row都加了h-25类，高度继承逻辑断裂，父容器实际没有形成稳定的高度约束链

不需要写固定像素高度，完全基于Bootstrap 5自带工具类即可实现响应式效果，调整逻辑如下：

• 清理重复高度类：只给最外层容器加h-25限定25%视口高度，内部row设为h-100填满父容器高度
• 给两个列（flex子项）加min-h-0类，破除默认的自动撑开行为，让父级高度约束生效
• 右侧需要滚动的列加overflow-y:auto，内容超出高度时自动显示垂直滚动条，左侧列无需加滚动属性

HTML #

<div class="page-body">
  <!-- 外层容器限定25%视口高度 -->
  <div class="container-fluid h-25">
    <div class="row justify-content-around h-100">
      <!-- 左侧状态表格列 -->
      <div class="col d-flex flex-column min-h-0">
        <table class="table table-bordered table-hover mb-0">
          <thead>
            <tr>
              <th colspan="2" class="text-center">System Status</th>
            </tr>
            <tr>
              <th>Active Jobs</th>
              <th>Queued Jobs</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td></td>
              <td></td>
            </tr>
          </tbody>
        </table>      
      </div>
      <!-- 右侧任务表格列，内容超出自动滚动 -->
      <div class="col d-flex flex-column min-h-0 overflow-y-auto">
        <table class="table table-bordered table-hover mb-0">
          <thead>
            <tr>
              <th colspan="3" class="text-center">Recently Executed Tasks</th>
            </tr>
            <tr>
              <th>Job</th>
              <th>Task</th>
              <th>Start Time</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Job B</td>
              <td>Task X</td>
              <td>06.06.2022 15:31:17</td>
            </tr>
            <!-- 任意数量行都不会撑开容器，超出自动滚动 -->
            <tr>
              <td>Job B</td>
              <td>Task X</td>
              <td>06.06.2022 15:31:17</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
  <!-- 表格下方可正常放置其他页面元素，不会被表格挤压 -->
</div>

CSS #

.page-body {
  width: 100vw;
  height: 100vh;
}

• 表格区域最高始终为视口高度的25%，全尺寸响应式适配，无固定像素值
• 左侧表格内容少的时候高度自动适配内容，无多余空白
• 右侧表格内容超出高度时自动显示垂直滚动条，不会溢出撑开父容器
• 表格下方区域不受表格内容长度影响，可正常排布其他元素

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