使用Bootstrap 4.5.2实现页脚自动固定至页面底部的问题求助

问题根源 #

你当前页面的核心问题是所有内容区块（.home-top、.home-2、.home-3）都用了绝对定位，这会让它们脱离正常文档流。虽然给body加了min-vh-100，但这些绝对定位的元素不会占据文档流空间，body的高度实际上只等于视口高度，所以mt-auto只能把页脚推到视口底部，而非整个页面内容的最下方。Bootstrap版本没问题，不用怀疑。

修复步骤 #

1. 移除内容区块的绝对定位，改用视口高度控制占比 #

把三个页面区块的position: absolute和top属性删掉，用min-height: 100vh让每个区块占满视口高度，同时保留position: relative让内部绝对定位的文字/链接正常工作：

/* HOME PAGE 1 */
.home-top {
  /* 删掉 position: absolute; top: 0; left: 0; */
  width: 100%;
  min-height: 100vh;
  background-image: url(https://source.unsplash.com/OyCl7Y4y0Bk);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

/* HOME PAGE 2 */
.home-2 {
  /* 删掉 position: absolute; top: 100%; left: 0; */
  width: 100%;
  min-height: 100vh;
  background-image: url(https://source.unsplash.com/OyCl7Y4y0Bk);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* 保留这个，让内部绝对定位的元素正常显示 */
}

/* HOME PAGE 3 */
.home-3 {
  /* 删掉 position: absolute; top: 200%; left: 0; */
  width: 100%;
  min-height: 100vh;
  background-image: url(https://source.unsplash.com/OyCl7Y4y0Bk);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative; /* 保留这个 */
}

2. 保留原本的Bootstrap布局类 #

你给body加的d-flex flex-column min-vh-100，以及footer的mt-auto是正确的，不用改：

<body class="d-flex flex-column min-vh-100">
  <!-- 页面内容区块 -->
  <footer class="pt-5 pb-5 footer mt-auto">
    <!-- 页脚内容 -->
  </footer>
</body>

3. 导航栏的定位不用改 #

.top-nav原本的绝对定位是基于.home-top的，现在.home-top改成块级元素后，这个定位依然有效，不需要调整。

修复原理 #

• 移除绝对定位后，内容区块会正常占据文档流空间，body的高度会自动拉伸到所有内容的总高度。
• body的d-flex flex-column让子元素（内容区块+页脚）垂直排列，min-vh-100保证即使内容不足时，body至少占满视口高度。
• footer的mt-auto会自动把自己推到body容器的底部，不管内容是长还是短。

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