如何配置Bootstrap5页面：让表格滚动至页脚且仅表格启用垂直滚动

我有一个使用Vue和Bootstrap 5的简单页面，页面结构如下：

<div class="container-fluid pt-1 pb-1 mb-3 header-section"> Header Section </div>
<div class="container-fluid content-section">      
  <div class="row">
    <div class="col-12">Filter Section</div>              
  </div>
  
   <div class="row">
      <div class="col-12">
        <div class="test-table"></div>       
      </div>
    </div> 
</div>   
</div>
<footer>Footer Section</footer>

当前表格数据较多时会撑满页面，要使用水平滚动条必须先垂直滚动到页面底部，体验很差。我希望禁用页面的垂直滚动，仅给表格添加垂直滚动功能，让表格数据过多时自动扩展到页脚位置，随时能使用水平滚动条。

要实现这个效果，核心是让页面整体高度固定，表格区域占据剩余可用空间并实现内部滚动，具体实现步骤如下：

1. 锁定页面视口高度，禁用全局滚动 #

首先设置根元素和页面主体占满视口高度，同时禁用页面级的垂直滚动：

html, body {
  height: 100vh;
  margin: 0;
  overflow: hidden;
}

2. 用Flexbox重构整体布局 #

把页面外层容器改成垂直方向的Flex布局，让中间内容区域自动填充Header和Footer之外的剩余空间：

<!-- 给最外层添加Flex容器类 -->
<div class="d-flex flex-column vh-100">
  <div class="container-fluid pt-1 pb-1 mb-3 header-section"> Header Section </div>
  <!-- 内容区域自动填充剩余空间，隐藏溢出内容 -->
  <div class="container-fluid content-section flex-grow-1 overflow-hidden">      
    <div class="row">
      <div class="col-12">Filter Section</div>              
    </div>
    
     <!-- 让表格所在行和列占满剩余高度 -->
     <div class="row h-100">
        <div class="col-12 h-100">
          <!-- 表格容器添加自动滚动 -->
          <div class="test-table h-100 overflow-auto"></div>       
        </div>
      </div> 
  </div>   
  <footer>Footer Section</footer>
</div>

3. 优化表格滚动细节（可选） #

如果表格包含表头，可固定表头让滚动体验更友好，添加以下样式：

.test-table table {
  width: 100%;
  table-layout: fixed;
}
.test-table thead {
  position: sticky;
  top: 0;
  background-color: #fff;
}
.test-table tbody {
  display: block;
  /* 减去表头高度，根据实际情况调整数值 */
  height: calc(100% - 48px);
  overflow-y: auto;
}
.test-table tr {
  display: table;
  width: 100%;
}

核心逻辑说明 #

• d-flex flex-column vh-100：让外层容器成为垂直Flex布局，高度完全占满视口
• flex-grow-1：让内容区域自动填充Header和Footer之外的剩余空间
• overflow-hidden：防止内容区域超出父容器，确保滚动仅发生在表格内部
• overflow-auto：表格容器内容超出时自动显示垂直/水平滚动条，水平滚动条会在内容过宽时始终可见

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