CSS及Bootstrap实现的页脚在短内容页面无法固定在页面底部

问题根因 #

你当前代码存在两个核心问题导致页脚无法在内容较少时固定在页面底部：

1. 样式冲突：.footer类同时设置了position: relative，又添加了Bootstrap自带的fixed-bottom类，后者会强制将元素定位改为fixed，两种定位规则冲突
2. 高度设置失效：仅给body设置了height: 100%，但没有给父元素html设置高度，导致body的高度默认仅适配内容高度，内容较少时无法占满整个视口，页脚自然只能跟随内容停在视口中间。

最优解决方案（粘性页脚） #

推荐使用Bootstrap 5官方推荐的弹性盒粘性页脚方案，效果为：内容较少时页脚自动贴在视口底部，内容超过视口高度时页脚跟随内容滚动到页面最底部，不会遮挡页面内容。

修正后的CSS代码 #

/* 新增html标签高度设置，作为body高度的参考基准 */
html {
  height: 100%;
}
.body-tag {            
  /* 把原来的height改为min-height，保证body最少占满整个视口高度 */
  min-height: 100%;
  display: flex;
  flex-direction: column;
  background: #F6F6F6;
  color: #333333;
  margin-top: 5rem; 
  /* 删除原有padding-bottom: 4rem配置 */
}
/* 新增页面主内容容器样式，自动占满body除页脚外的所有剩余高度 */
.main-content {
  flex: 1 1 auto;
}
.footer {
  width: 100%;
  height: 150px;
  background:#dfdfdf;
  /* 删除原有position: relative、bottom: 0配置 */
}

修正后的HTML代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<html>
<body class="body-tag">
  <!-- 新增主内容容器，所有页面主体内容都放到这个容器内 -->
  <div class="main-content container">
    <!-- 此处放置你的页面内容，比如文章、表单、产品列表等 -->
  </div>
  <!-- 页脚删除fixed-bottom类，避免悬浮遮挡内容 -->
  <div class="footer">
    <div class="container">
        <footer class="py-3 my-4">
            <ul class="nav justify-content-center border-bottom pb-3 mb-3">
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">首页</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">功能</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">定价</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">常见问题</a></li>
                <li class="nav-item"><a href="#" class="nav-link px-2 footer-text">关于我们</a></li>
            </ul>
            <p class="text-center footer-text">&copy; name, Inc</p>
        </footer>
    </div>
  </div>
</body>
</html>

可选方案（固定悬浮页脚） #

如果你需要页脚始终固定在视口底部，不随页面滚动，可使用该方案，注意要给body添加和页脚高度一致的底部内边距，避免内容被页脚遮挡：

.body-tag {            
  background: #F6F6F6;
  color: #333333;
  margin-top: 5rem; 
  /* 底部内边距和页脚高度保持一致 */
  padding-bottom: 150px;
}
.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 150px;
  background:#dfdfdf;
}

HTML保留fixed-bottom类即可。

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