Bootstrap 4 实现全屏居中无滚动页面及底部居中页脚

我来帮你搞定这个无滚动、内容精准居中还带底部页脚的页面问题！你遇到的滚动条问题，核心是父元素高度没有正确继承，加上浏览器默认的margin/padding导致垂直方向溢出。下面是完整的解决方案：

关键修复点 #

• 确保html和body占满整个视口高度，且去掉默认margin避免溢出
• 使用Flex布局让内容区域自动填充剩余空间，页脚固定在底部
• 精准控制内容的居中对齐

完整代码示例 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>无滚动居中页面</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <style>
    /* 核心：让html和body占满视口，去掉默认margin */
    html, body {
      height: 100%;
      margin: 0;
    }
  </style>
</head>
<body class="d-flex flex-column h-100">
  <!-- 内容区域：自动填充除页脚外的空间，同时居中 -->
  <main class="flex-grow-1 d-flex justify-content-center align-items-center">
    <div class="text-center">
      <h1>核心文本</h1>
      <p>这里可以添加任意内容，不会出现滚动条</p>
    </div>
  </main>

  <!-- 底部页脚：固定在页面底部 -->
  <footer class="text-center py-3 bg-light">
    <p>这是居中的页脚内容</p>
  </footer>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

为什么你的代码会出现滚动条？ #

1. 父级高度缺失：你的cover-container用了h-100，但如果html和body没有设置height:100%，这个100%高度是无效的，容器无法撑满视口
2. 默认margin溢出：浏览器默认给body加了margin:8px，这会让页面总高度超过视口，直接出现滚动条
3. 布局结构问题：用row作为垂直容器不如直接用Bootstrap的Flex工具类更直观，flex-grow-1能确保内容区域自动填充剩余空间，不会挤压页脚

额外说明 #

• 如果需要给内容区域加背景色，直接给main标签加bg-*类即可
• 页脚的样式可以根据需求调整，比如bg-dark text-white实现深色页脚
• 若内容确实超过视口高度，可给main添加overflow-auto，让内容区域内部滚动，而非整个页面滚动

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