Bootstrap 3.3.7中position:fixed引发内容重叠，如何实现头固主体滚动？

这个问题我在Bootstrap 3项目里碰到过好多次，核心原因是position: fixed会让头部脱离正常文档流，后面的主体元素会自动填补它原来的位置，导致重叠。下面是几个适配3.3.7版本的有效解法：

方法一：利用Bootstrap自带的导航栏类（如果头部是导航栏） #

Bootstrap 3本身提供了navbar-fixed-top类来实现固定顶部导航，官方文档里也明确提到需要给页面主体添加内边距来避免内容被覆盖。

代码示例： #

<!-- 固定顶部导航栏 -->
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">我的固定头部</a>
    </div>
  </div>
</nav>

<!-- 主体内容容器 -->
<div class="container main-content">
  <!-- 这里放置你的长内容，超出后会自动滚动页面 -->
  <p>大量测试内容...</p>
  <p>大量测试内容...</p>
  <!-- 重复足够多的内容来触发滚动 -->
</div>

对应的CSS：

/* 给主体内容添加内边距，避开固定导航栏 */
.main-content {
  padding-top: 70px; /* 比导航栏默认高度50px多留20px，避免紧贴 */
}

/* 适配小屏幕下折叠后的导航栏（高度会增加） */
@media (max-width: 767px) {
  .main-content {
    padding-top: 100px;
  }
}

方法二：自定义固定头部+可滚动主体（非导航栏场景） #

如果你的头部不是Bootstrap导航栏，而是自定义的容器，可以通过手动控制间距和主体高度来实现仅主体滚动的效果：

代码示例： #

<!-- 自定义固定头部 -->
<div class="custom-fixed-header">
  <h3>自定义固定头部</h3>
</div>

<!-- 可滚动的主体容器 -->
<div class="custom-scrollable-body">
  <!-- 长内容，超出后仅在主体内部滚动 -->
  <p>大量测试内容...</p>
  <p>大量测试内容...</p>
  <!-- 重复足够多的内容来触发滚动 -->
</div>

对应的CSS：

.custom-fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* 自定义头部的高度 */
  background-color: #f5f5f5;
  padding: 10px 15px;
  z-index: 1000; /* 确保头部在主体上方，不会被覆盖 */
  border-bottom: 1px solid #ddd;
}

.custom-scrollable-body {
  margin-top: 60px; /* 值等于头部的高度，刚好避开头部 */
  height: calc(100vh - 60px); /* 计算剩余屏幕高度，让主体占满可视区域 */
  overflow-y: auto; /* 内容超出时仅在主体内部滚动 */
  padding: 15px;
}

关键要点： #

• z-index: 1000：保证固定头部始终在主体内容上方，防止被遮挡
• margin-top/padding-top：值必须和固定头部的高度一致，精准避开重叠区域
• calc(100vh - 头部高度)：让主体刚好填充剩余的屏幕空间，实现仅主体滚动的效果

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