如何在Bootstrap 4中不使用position:absolute/fixed实现footer置底

嘿，这个问题我太熟悉了！很多人在Bootstrap里做页脚都会踩这个坑——用absolute会覆盖内容，fixed一直占着屏幕，relative又搞出莫名空白。其实Bootstrap 4本身就有基于flexbox的完美解决方案，根本不用纠结那些position属性。

方案一：用Bootstrap内置的Flex类（推荐） #

Bootstrap 4对flexbox支持得很好，直接用它的类就能搞定，几乎不用写额外CSS：

首先调整你的HTML结构，把整个页面内容（包括container和footer）放在一个占满视口高度的flex容器里，然后让内容区域自动填充剩余空间，把footer挤到底部：

<body class="d-flex flex-column min-vh-100">
  <div class="container flex-grow-1">
    <!-- 你的页面内容在这里 -->
    比如各种段落、卡片、表单...
  </div>
  <footer>
    <!-- 页脚内容 -->
    版权信息 | 联系方式
  </footer>
</body>

然后你的footer CSS可以保留原来的样式，再加个padding让内容不贴边会更美观：

footer {
  width: 100%;
  background-color: grey;
  text-align: center;
  padding: 1rem 0; /* 可选，让页脚内容有上下间距 */
}

方案二：纯自定义CSS（如果不想依赖Bootstrap类） #

如果你更倾向于自己写CSS控制，原理和上面一样，核心还是用flex布局：

先给body设置基础样式，让它成为一个flex容器并占满视口高度：

body {
  margin: 0; /* 清除默认margin，避免出现不必要的滚动条 */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  flex: 1; /* 让内容容器自动填充所有剩余空间 */
}

footer {
  width: 100%;
  background-color: grey;
  text-align: center;
  padding: 1rem 0;
}

HTML结构不用改，还是你原来的：

<div class="container">
  <!-- 页面内容 -->
</div>
<footer>
  <!-- 页脚内容 -->
</footer>

为什么你之前的方法会出问题？ #

用position: relative的时候，bottom: 0其实是相对于元素本身原来的位置向上偏移0，根本不会改变它在文档流里的位置。如果页面内容不够长，footer还是会停在内容下方，而页面底部的空白是因为body没有占满视口高度，这时候relative完全起不到“固定在底部”的作用。

而上面的flex方案是通过空间分配来实现的：父容器占满视口高度，内容区域自动填充所有剩余空间，footer自然就被推到了页面底部。当内容超过视口高度时，footer会跟着内容往下走，完全不会覆盖内容，完美符合你的需求！

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