如何用HTML、CSS修复滚动时导航栏与侧边栏错位出现间隙的问题

问题原因 #

• 导航栏未设置固定定位，属于普通文档流元素，滚动页面时会随内容向上移动
• 侧边栏设置了position: fixed但未指定top属性，默认对齐它在文档流中的初始位置，而fixed定位是相对于浏览器视口固定，页面滚动时导航栏向上移动、侧边栏位置不变，二者的间隙就会越来越大

修复步骤 #

1. 给导航栏添加Bootstrap内置的fixed-top类，让导航栏真正固定在视口顶部，不随滚动移动
2. 给侧边栏添加top: 56px样式（Bootstrap5默认导航栏高度为56px，如果自定义了导航栏高度，替换为实际高度即可），让侧边栏始终对齐导航栏的底部，同时调整侧边栏高度为calc(100% - 56px)，避免侧边栏超出视口底部
3. 给内容区域添加padding-top: 56px，避免导航栏固定后遮挡顶部内容
4. 在小于700px的响应式断点中重置侧边栏的top属性为0，避免移动端布局出现多余间隙

修改后的代码 #

CSS部分 #

.sidebar {
  margin: 0;
  padding: 0;
  width: 200px;
  background-color: #f1f1f1;
  position: fixed;
  /* 新增以下两行 */
  top: 56px;
  height: calc(100% - 56px);
  overflow: auto;
}

.sidebar a {
  display: block;
  color: black;
  padding: 16px;
  text-decoration: none;
}
 
.sidebar a.active {
  background-color: #04AA6D;
  color: white;
}

.sidebar a:hover:not(.active) {
  background-color: #555;
  color: white;
}

div.content {
  margin-left: 200px;
  padding: 1px 16px;
  /* 新增以下一行 */
  padding-top: 56px;
  height: 1000px;
}

@media screen and (max-width: 700px) {
  .sidebar {
    width: 100%;
    height: auto;
    position: relative;
    /* 新增以下一行 */
    top: 0;
  }
  .sidebar a {float: left;}
  div.content {margin-left: 0;}
}

@media screen and (max-width: 400px) {
  .sidebar a {
    text-align: center;
    float: none;
  }
}

HTML导航栏部分 #

<!-- 只需要给nav标签添加fixed-top类即可，其余内容不变 -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <a class="navbar-brand" href="#">App</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav  mr-auto">
      <li class="nav-item">
        <a class="nav-link" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
    </ul>
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="#">Login</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Register</a>
        </li>
    </ul>
  </div>
</nav>

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