如何在Bootstrap 5中实现页脚始终贴合页面底部？

要实现内容少时页脚固定在视口底部，内容多时随内容滚动至末尾的效果，无需使用fixed-bottom（会遮挡内容）或sticky-bottom（不符合需求），直接用Bootstrap 5内置的flex类即可解决：

核心实现步骤 #

1. 给<body>添加垂直flex布局和最小视口高度类，确保页面容器占满视口：

   <body class="d-flex flex-column min-vh-100">
   

2. 给内容容器添加flex-grow-1类，让它自动填充页面剩余空间，把页脚挤到底部：

   <div class="container flex-grow-1">
     <h1>Title</h1>
     <p>Content</p>
     <!-- 可添加更多内容测试滚动效果 -->
   </div>
   

完整代码示例 #

<html>
<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" integrity="sha256-IUOUHAPazai08QFs7W4MbzTlwEWFo7z/4zw8YmxEiko=" crossorigin="anonymous">
</head>
<body class="d-flex flex-column min-vh-100">
  
  <div class="container flex-grow-1">
    <h1>Title</h1>
    <p>Content</p>
    <!-- 测试多内容的话可以复制下面这行多次 -->
    <!-- <p>更多内容，用于测试滚动时页脚的位置</p> -->
  </div>
  
  <footer class="bg-black text-white">
    <div class="container">
      <p>This should be at the bottom of the page</p>
      <p>This should be no white band below this</p>
    </div>
  </footer>
  
  
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha256-xLI5SjD6DkojxrMIVBNT4ghypv12Xtj7cOa0AgKd6wA=" crossorigin="anonymous"></script>
</body>
</html>

原理说明 #

• min-vh-100 确保<body>最小高度为视口高度，避免内容少时页面高度不足
• d-flex flex-column 将页面元素设置为垂直方向的flex布局
• flex-grow-1 让内容容器占据<body>的剩余空间，无论内容多少，页脚都会处于页面底部位置：内容少时被挤到视口底部，内容多时随内容滚动至页面末尾

内容的提问来源于stack exchange，提问作者Geoffrey De Smet