如何用Bootstrap 4工具类实现父级全高左侧侧边导航？

嘿，这个问题我太熟了！之前帮朋友做后台页面的时候刚好踩过类似的坑，Bootstrap 4其实自带了一套工具类就能完美解决，不用自己写一堆复杂的自定义CSS，我给你一步步拆解：

• 先搞定基础高度继承
  Bootstrap的h-100工具类是设置元素高度为100%，但它依赖父元素有明确的高度。所以首先要做这两步：

  • 给<html>和<body>设置height: 100%;（写一行基础CSS就行，Bootstrap没给根元素默认全屏高度）
  • 给最外层容器（比如.container-fluid）和包裹列的.row都加上h-100类，确保高度能逐层传递到视口高度。

• 配置侧边导航栏
  侧边栏的列（比如.col-md-3）需要这么设置：

  • 加上h-100让它占满父.row的高度
  • 加上d-flex flex-column把侧边栏变成垂直方向的弹性容器，方便内部元素灵活排布
  • 如果侧边栏里有顶部标题、中间导航、底部版权这类分段内容，给中间的导航部分加上flex-grow-1，让它自动填充剩余空间——这样即使导航内容少，侧边栏也能撑满全屏高度

• 设置主内容滚动
  主内容的列（比如.col-md-9）同样加上h-100，然后再加overflow-y-auto——这个类会在内容超过视口高度时自动显示垂直滚动条，而且只有主内容区域滚动，侧边栏保持固定高度。

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Full Height Sidebar Bootstrap 4</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
  <style>
    /* 确保根元素占满视口高度，是h-100生效的前提 */
    html, body {
      height: 100%;
    }
  </style>
</head>
<body class="h-100">
  <div class="container-fluid h-100 p-0">
    <div class="row h-100">
      <!-- 侧边导航 -->
      <div class="col-md-3 bg-light h-100 d-flex flex-column">
        <div class="p-3 border-bottom">
          <h5>侧边导航</h5>
        </div>
        <nav class="flex-grow-1 p-3">
          <ul class="nav flex-column">
            <li class="nav-item">
              <a class="nav-link active" href="#">首页</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">文章</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">分类</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">设置</a>
            </li>
          </ul>
        </nav>
        <div class="p-3 border-top">
          <small>© 2025 版权所有</small>
        </div>
      </div>
      <!-- 主内容区域 -->
      <div class="col-md-9 h-100 overflow-y-auto">
        <div class="p-5">
          <h1>主内容区域</h1>
          <!-- 复制大量文本测试滚动效果 -->
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

关键细节提醒 #

• 一定要确保html和body的高度设置为100%，否则所有h-100都会失效
• flex-grow-1是让侧边栏的导航部分自动填充剩余空间的核心，没有它的话，导航内容少的时候侧边栏高度会跟着内容走，达不到全屏效果
• overflow-y-auto只给主内容列加，这样滚动只会发生在主区域，侧边栏始终固定在全屏高度

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