Bootstrap 5：如何根据fixed-top导航栏高度下移position-fixed左侧列

嘿，我来帮你搞定这三个问题，咱们逐个解决：

fixed定位的元素脱离了文档流，所以导航栏的高度不会自动影响它的位置。这里有两种解决方案：

静态方案（适合导航栏高度固定的场景） #

直接给左侧固定列设置top值等于导航栏的高度，同时调整它的高度为视口高度减去导航栏高度：

<section class="col-md-3 col-lg-2 position-fixed p-0 scrollable" style="top: 56px; height: calc(100vh - 56px);">

这里的56px是Bootstrap默认navbar的高度，如果你的导航栏有自定义高度，替换成对应的数值即可。

动态方案（适配导航栏高度变化） #

如果导航栏高度可能变化（比如响应式布局下breadcrumb换行），用JavaScript动态计算导航栏高度并设置左侧列的样式：

// 页面加载时计算
window.addEventListener('load', adjustSidebar);
// 窗口resize时重新计算
window.addEventListener('resize', adjustSidebar);

function adjustSidebar() {
  const navbar = document.querySelector('.navbar.fixed-top');
  const leftSidebar = document.querySelector('.position-fixed.scrollable');
  if (navbar && leftSidebar) {
    const navbarHeight = navbar.offsetHeight;
    leftSidebar.style.top = `${navbarHeight}px`;
    leftSidebar.style.height = `calc(100vh - ${navbarHeight}px)`;
  }
}

这个问题是因为你给左侧列加了h-100类，它的高度是父容器的100%，而父容器是row h-100（等于视口高度），但左侧列是fixed定位，父容器的高度对它无效，再加上导航栏挡住了顶部一部分，导致滚动区域的底部超出了视口，所以滚不到底。

上面的动态/静态方案已经解决了这个问题——通过设置height: calc(100vh - 导航栏高度)，让左侧列的高度刚好是视口减去导航栏的高度，这样滚动区域完全在视口内，就能滚动到底部。记得把左侧列的h-100类去掉，因为我们已经用内联样式或者JS设置了高度。

这个问题大概率是因为你给html, body设置了height: 100%!important，导致body的高度被固定为视口高度，当中间区域的内容超出时，滚动的是section内部而不是body，视觉上可能误以为导航栏消失，但实际上导航栏还是fixed在顶部的。

解决方法：

• 最简单的方式是去掉html, body { height: 100%!important; }这个样式，让body的高度自动适应内容高度，这样滚动的是body，导航栏会一直固定在顶部。
• 如果必须保留height:100%，可以给body加上overflow:auto，确保内容超出时body能滚动：

html, body {
  height: 100%!important;
  overflow: auto;
}

另外，确保导航栏的z-index足够高（Bootstrap的fixed-top类已经默认设置了z-index:1030），避免被其他元素覆盖，如果还是有问题，可以手动给导航栏加z-index:1030：

<header class="navbar navbar-light bg-light fixed-top p-0 border-bottom" style="z-index:1030;">

这里是修改后的完整HTML代码，你可以直接测试：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
  <style>
    .navbar-brand img { filter: invert(65%) sepia(91%) saturate(7314%) hue-rotate(210deg) brightness(101%) contrast(98%); }
    .scrollable { overflow: hidden; }
    .scrollable:hover { overflow: auto; }
    ::-webkit-scrollbar { width: 3px; height: 3px; background-color: #F5F5F5; }
    ::-webkit-scrollbar-track { background-color: #FEFEFE; }
    ::-webkit-scrollbar-thumb { background-color: #6c757d; }
  </style>
  <title>BS5 Layout</title>
</head>
<body class="bg-light">
  <header class="navbar navbar-light bg-light fixed-top p-0 border-bottom" style="z-index:1030;">
    <div class="col-12 col-md-3 col-lg-2">
      <a class="navbar-brand text-primary px-2" href="#">
        <img src="https://simplisti.com/assets/logo.svg" width="32" height="32" class="d-inline-block align-top " loading="lazy"> Brand
      </a>
    </div>
    <nav class="col-12 col-md-9 col-lg-10 border-start" aria-label="breadcrumb">
      <ol class="breadcrumb mt-3 px-2">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item"><a href="#">Contacts</a></li>
        <li class="breadcrumb-item active" aria-current="page">List</li>
      </ol>
    </nav>
  </header>
  <div class="container-fluid">
    <div class="row">
      <section class="col-md-3 col-lg-2 position-fixed p-0 scrollable">
        This will scroll all the way to bottom now!<br>
        item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>
        item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>
        item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>item<br>Last item
      </section>
      <section class="col-md-5 col-lg-7 offset-md-3 offset-lg-2 p-0 border-start">
        Repeat this content and navbar stays visible<br>
        line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
        line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
        line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>Last line<br>
      </section>
      <section class="col-md-4 col-lg-3 p-0 border-start">
        SIDE<br>
        line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
        line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>
        line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>line<br>Last line<br>
      </section>
    </div>
  </div>

  <script>
    window.addEventListener('load', adjustSidebar);
    window.addEventListener('resize', adjustSidebar);

    function adjustSidebar() {
      const navbar = document.querySelector('.navbar.fixed-top');
      const leftSidebar = document.querySelector('.position-fixed.scrollable');
      if (navbar && leftSidebar) {
        const navbarHeight = navbar.offsetHeight;
        leftSidebar.style.top = `${navbarHeight}px`;
        leftSidebar.style.height = `calc(100vh - ${navbarHeight}px)`;
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
</body>
</html>

内容的提问来源于stack exchange，提问作者Alex.Barylski