实现100vh容器内3列独立滚动并占满可用空间的CSS方案

核心问题出在固定高度的冲突：你给三列容器设置了h-100，但它的父容器已经包含了自适应高度的Header，导致总高度超出100vh。以下是纯Bootstrap CSS的修正方案，完全满足你的需求：

修改后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<style>
  body {
    margin: 0;
    overflow: hidden; /* 确保body无滚动条 */
  }
</style>

<div class="container-xxl h-100 d-flex flex-column">
  <div class="row h-100">
    <div class="col-2" id="left">
      side bar menu
    </div>
    <div class="col-12 col-md-10 h-100 d-flex flex-column" id="right">
      <!-- 自适应Header -->
      <div class="row">
        <div class="col-12">
          Header with some stuff ...
          <p>some stuff of the header</p>
        </div>
      </div>
      <!-- 三列容器：占据Header剩余的全部空间 -->
      <div class="row flex-grow-1 overflow-hidden" id="threecolumns" style="background-color:#fee">
        <div class="col-4 h-100 overflow-auto" style="background-color:#f2e">
          column with its own scroll
          <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        </div>
        <div class="col-4 h-100 overflow-auto" style="background-color:#d3e">
          column with its own scroll
          <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        </div>
        <div class="col-4 h-100 overflow-auto" style="background-color:#e4e">
          column with its own scroll
          <p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p><p>...</p>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>

关键改动说明 #

• Body样式：添加margin:0消除默认边距，overflow:hidden彻底禁止body滚动条。
• 三列容器：将原有的h-100替换为flex-grow-1 overflow-hidden：
  • flex-grow-1让容器自动填充Header之后的剩余垂直空间，完美适配自适应Header的高度。
  • overflow-hidden确保容器不会超出父容器范围，同时为内部列的滚动提供边界。
• 容器层级：确保container-xxl和所有父级容器的flex-column布局正确，让垂直空间分配逻辑生效。

这样修改后，Header会根据内容自动调整高度，三个列会填满剩余空间，内容超出时各自显示独立滚动条，整个页面不会出现body滚动条，完全符合你的需求。

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