如何使用Bootstrap 5实现侧边栏在页眉和页脚之间占满高度

完全可以实现，用Bootstrap自带的弹性盒工具类加少量自定义样式即可，不需要复杂的JS逻辑，适配Bootstrap 4及以上版本。

核心调整思路 #

把页面整体改成垂直弹性盒布局，让中间内容区域自动撑满页眉和页脚之间的剩余高度，侧边栏会自动继承父容器高度实现全屏效果，内容超出视口高度时也会同步延伸。

修改后的完整代码 #

CSS部分 #

/* 仅保留必要自定义样式，其余逻辑用Bootstrap工具类实现 */
body {
  margin: 0;
}
.footer {
  height: 75px;
  background-color: #303030;
  color: white;
} 

HTML部分 #

<!-- 给body添加弹性盒布局类，最小高度占满整个视口 -->
<body class="d-flex flex-column min-vh-100">
  <nav class="navbar navbar-expand-sm" style="background-color: #303030;">
    <div class="container-fluid">
      <a class="navbar-brand" href="#" title="Home">MyLogo</a>
    </div>
  </nav>
  <!-- 中间内容区添加flex-grow-1，自动撑满页眉和页脚的剩余高度 -->
  <div class="container-fluid flex-grow-1 p-0">
    <div class="row h-100 m-0" style="border: 2px solid red;">
      <div class="col-3 h-100" style="border: 2px solid blue;">
        <p>vertical navigation</p>
      </div>
      <div class="col-9">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
          Adipisci error vel recusandae minus ea atque non vitae dolorem commodi dolores 
          nostrum, est reiciendis maxime ab sit aliquid! Aliquam, modi natus.</p>
      </div>
    </div>
  </div>
  <div class="footer">Footer</div>
</body>

关键调整说明 #

• 去掉了原代码中html的相对定位、body的底部外边距、footer的绝对定位规则，改用弹性盒布局实现页脚自动停靠底部，兼容性更好，也符合Bootstrap的官方设计规范
• min-vh-100类保证页面最小高度等于视口高度，内容不足时也能让侧边栏撑满全屏
• flex-grow-1类让中间内容容器自动占用页眉、页脚之外的所有剩余高度，侧边栏设置h-100后就会自动填满整个中间区域

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