Bootstrap 5固定垂直导航栏适配视口：解决vh-100与边距引发的溢出问题

嘿，我之前也踩过这个坑！Bootstrap的vh-100加上外边距确实会触发这个问题——原因很直白：vh-100是让元素占满100%视口高度，再加上m-3的上下外边距（各1rem），总高度就变成了100vh + 2rem，自然就超出视口导致滚动条出现了。给你几个实用的解决方案，都是基于Bootstrap原生类或少量自定义样式，既能保持响应式，又能彻底解决溢出问题：

方法1：用容器包裹，把外边距转为容器内边距（最贴合Bootstrap设计思路） #

不需要写自定义CSS，只需要给导航栏套一层容器，把间距逻辑转移到容器上：

• 外层容器设为position-fixed top-0 start-0 vh-100 p-3，负责固定定位、占满视口高度，并用内边距替代原来导航栏的外边距；
• 导航栏去掉m-3，保留h-100（占满容器高度）和其他样式，这样容器的内边距就给导航栏留出了空间，总高度刚好等于100vh。

修改后的代码示例：

<!-- Bootstrap 5 + icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.12.1/font/bootstrap-icons.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.6/dist/js/bootstrap.bundle.min.js"></script>

<!-- 外层容器负责定位和间距 -->
<div class="position-fixed top-0 start-0 vh-100 p-3">
  <nav class="navbar navbar-expand d-flex flex-column align-items-start h-100 p-3 bg-white rounded shadow">
    <ul class="navbar-nav flex-column w-100">
      <li class="nav-item">
        <a class="nav-link d-flex flex-column align-items-center text-secondary py-3" href="#" aria-label="Home" data-bs-toggle="tooltip" data-bs-placement="right" title="Home">
          <i class="bi bi-house-door-fill fs-4"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link d-flex flex-column align-items-center text-secondary py-3" href="#" aria-label="Messages" data-bs-toggle="tooltip" data-bs-placement="right" title="Messages">
          <i class="bi bi-chat-square-dots-fill fs-4"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link d-flex flex-column align-items-center text-secondary py-3" href="#" aria-label="Customers" data-bs-toggle="tooltip" data-bs-placement="right" title="Customers">
          <i class="bi bi-people-fill fs-4"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link d-flex flex-column align-items-center text-secondary py-3" href="#" aria-label="Projects" data-bs-toggle="tooltip" data-bs-placement="right" title="Projects">
          <i class="bi bi-folder-fill fs-4"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link d-flex flex-column align-items-center text-secondary py-3" href="#" aria-label="Resources" data-bs-toggle="tooltip" data-bs-placement="right" title="Resources">
          <i class="bi bi-archive-fill fs-4"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link d-flex flex-column align-items-center text-secondary py-3" href="#" aria-label="Help" data-bs-toggle="tooltip" data-bs-placement="right" title="Help">
          <i class="bi bi-question-circle-fill fs-4"></i>
        </a>
      </li>
      <li class="nav-item">
        <a class="nav-link d-flex flex-column align-items-center text-secondary py-3" href="#" aria-label="Settings" data-bs-toggle="tooltip" data-bs-placement="right" title="Settings">
          <i class="bi bi-gear-fill fs-4"></i>
        </a>
      </li>
    </ul>
  </nav>
</div>

方法2：用calc()自定义高度（适合不想加外层容器的场景） #

如果不想额外加容器，可以直接给导航栏计算精确高度，抵消外边距的影响：

• 去掉vh-100，用内联样式或自定义类设置高度为calc(100vh - 2rem)（因为m-3的上下边距总和是2rem）；
• 这样导航栏高度加上外边距刚好等于100vh，不会溢出。

代码示例（内联样式版）：

<nav class="navbar navbar-expand d-flex flex-column align-items-start position-fixed top-0 start-0 m-3 p-3 bg-white rounded shadow" style="height: calc(100vh - 2rem);">
  <!-- 导航栏内容保持不变 -->
  <ul class="navbar-nav flex-column w-100">
    <!-- 导航项省略 -->
  </ul>
</nav>

如果想做成可复用的类，可以在自定义CSS里添加：

.vh-100-minus-m3 {
  height: calc(100vh - 2rem);
}

之后导航栏直接用vh-100-minus-m3类替代内联样式即可。

为什么你之前的尝试没解决问题？ #

你用vh-99是硬凑高度，不同屏幕尺寸下可能还是会出现溢出或留白；而换容器的思路没错，但没调整间距的归属——把外边距转移到容器的内边距，才能让总高度精确匹配视口。

内容来源于stack exchange