Bootstrap 4布局问题：两栏结构下粘性页脚位置异常

我明白你遇到的问题了——当把Bootstrap的栅格系统（row/col）加入到官方粘性页脚示例中时，原来的定位逻辑被打破了：你的footer被嵌套在右侧的col-sm-10容器里，它的绝对定位参考对象变成了这个col而非整个页面的根元素，导致它无法固定在页面底部，反而跑到了导航栏下方。

下面是具体的修复方案：

核心调整思路 #

1. 将footer移出栅格容器：footer是全局页脚，应该放在container-fluid外面，这样它的定位参考才能是整个页面的根元素（html/body）。
2. 确保侧边栏全高：给左侧侧边栏的col设置min-height: 100vh，让它撑满整个视口高度。
3. 修正间距与定位：调整body和内容区的padding，避免内容被footer遮挡，同时保持footer的绝对定位逻辑。

修改后的完整代码 #

CSS 代码 #

/* 基础布局与粘性页脚样式 */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* 移除原来的margin-bottom，改为给内容区加padding-bottom */
  margin: 0;
}
/* 让栅格容器撑满视口高度（减去footer高度） */
.container-fluid {
  min-height: calc(100vh - 60px);
}
/* 左侧全高侧边栏 */
.sidebar {
  min-height: 100%;
  background-color: #f8f9fa; /* 可选：给侧边栏加背景色区分 */
}
/* 右侧内容区：添加padding-bottom避免被footer遮挡 */
.main-content {
  padding-bottom: 80px; /* 比footer高度多20px，留出缓冲 */
}
/* 粘性页脚样式 */
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #f5f5f5;
}

HTML 代码 #

<div class="container-fluid h-100">
  <div class="row h-100">
    <!-- 左侧全高侧边栏 -->
    <div class="col-sm-2 sidebar">
      Sidebar
    </div>
    <!-- 右侧主内容区 -->
    <div class="col-sm-10 main-content">
      <div class="navbar">
        <!-- 导航栏内容 -->
        Navbar Content
      </div>
      <div class="content">
        test1<br>
        <!-- 可以多加点内容测试滚动时footer的位置 -->
        test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
        test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>test<br>
      </div>
    </div>
  </div>
</div>
<!-- 全局footer，放在栅格容器外面 -->
<footer class="footer">
  <div class="container">
    <span class="text-muted">Test</span>
  </div>
</footer>

关键说明 #

• 我们给container-fluid和row都加上了Bootstrap内置的h-100类（高度100%），再配合侧边栏的min-height:100%，确保侧边栏能撑满整个视口高度。
• 将footer从栅格容器中移出后，它的绝对定位会以html元素为参考，从而固定在页面底部。
• 给右侧主内容区添加padding-bottom，是为了避免当内容过长时，底部内容被footer遮挡。

内容的提问来源于stack exchange，提问作者J.Adams