Bootstrap页脚问题：设置position:absolute后首个页脚失效

嘿，这个问题我之前也碰到过！当你给第二个页脚设置position:absolute后，它会脱离正常的文档流——简单说就是它不再占据原本的空间，而且会相对于最近的非static定位父元素来摆放位置。这就很容易导致第一个页脚被它覆盖，或者因为文档流变化而位置错乱。

下面给你几种针对性的解决方案，根据你的需求选就行：

方案1：两个页脚都随内容滚动（不脱离文档流） #

如果希望两个页脚都紧跟在页面内容下方，完全不需要用absolute，用Flex布局就能轻松实现：

<div class="page-wrapper">
  <!-- 这里是你的页面内容 -->
  <main>页面主体内容</main>
  
  <footer class="footer-first">第一个页脚</footer>
  <footer class="footer-second">第二个页脚</footer>
</div>

.page-wrapper {
  min-height: 100vh; /* 让容器至少占满视口高度 */
  display: flex;
  flex-direction: column;
}

main {
  flex: 1; /* 让主体内容占满剩余空间，把页脚挤到下方 */
}

.footer-first {
  padding: 1.5rem;
  background-color: #f0f0f0;
}

.footer-second {
  padding: 1.5rem;
  background-color: #e0e0e0;
}

这种方案下，两个页脚都会正常占据文档流空间，跟随内容一起滚动，不会出现覆盖或错位问题。

方案2：第二个页脚固定在视口底部，第一个随内容滚动 #

如果需要第二个页脚始终固定在浏览器底部，第一个页脚紧跟内容，那得用position:fixed代替absolute，同时给第一个页脚留出足够的底部空间，避免内容被固定页脚覆盖：

.footer-first {
  padding: 1.5rem;
  background-color: #f0f0f0;
  margin-bottom: 4rem; /* 留出第二个固定页脚的高度 */
}

.footer-second {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background-color: #e0e0e0;
  height: 4rem; /* 对应上面的margin-bottom值 */
}

方案3：两个页脚都固定在页面底部（不随滚动移动） #

如果想让两个页脚都固定在视口底部，上下排列，可以给父容器设置position:relative，然后两个页脚都用absolute定位，分别设置不同的bottom值：

<div class="page-wrapper">
  <!-- 页面内容 -->
  <main>页面主体内容</main>
  
  <footer class="footer-first">第一个页脚</footer>
  <footer class="footer-second">第二个页脚</footer>
</div>

.page-wrapper {
  position: relative;
  min-height: 100vh;
  padding-bottom: 8rem; /* 两个页脚的总高度，避免内容被覆盖 */
}

.footer-first {
  position: absolute;
  bottom: 4rem; /* 等于第二个页脚的高度 */
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background-color: #f0f0f0;
  height: 4rem;
}

.footer-second {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 1.5rem;
  background-color: #e0e0e0;
  height: 4rem;
}

你可以根据自己的实际布局需求选择对应的方案，核心就是避免absolute元素脱离流后对正常文档流元素的干扰~

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