如何让Bootstrap的.container自适应填充可用宽高，不受内容大小影响

问题描述 #

想要让div.container刚好填充可用的宽度和高度，之前通过设置固定padding: 255px 0px实现了适配自身屏幕的效果，但这并非通用方案：缩小窗口时内容溢出、footer被遮挡；大屏设备下footer下方出现空白。目标是实现类似谷歌首页的效果：footer始终位于底部，仅当窗口缩小到特定尺寸时内容才会溢出，同时div.front的内边距随窗口大小动态调整。

实现方案 #

使用CSS Flexbox布局构建自适应页面结构，核心是让中间内容区域自动填充navbar和footer之外的剩余空间，同时保证内容溢出时可滚动。

步骤1：调整全局布局 #

将body设为垂直方向的Flex容器，让子元素（navbar、container、footer）按垂直方向排列，同时设置min-height: 100vh确保页面至少占满视口高度：

html, body {
  min-height: 100vh;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

步骤2：让中间容器填充剩余空间 #

给包含内容的容器（div.container.full-size）添加flex-grow: 1，使其自动占据navbar和footer之外的所有可用空间；同时设置overflow-y: auto，当内容超出容器高度时自动显示滚动条：

.full-size {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  align-items: center; /* 让内容垂直居中 */
  justify-content: center; /* 让内容水平居中 */
}

步骤3：优化div.front的内边距 #

移除固定padding值，改用相对单位的内边距，确保内容在不同屏幕尺寸下合理展示：

.front {
  width: 100%;
  padding: 2rem 0; /* 用相对单位适配不同屏幕 */
}

完整修改后的代码 #

CSS代码

html, body {
  min-height: 100vh;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

.full-size {
  flex-grow: 1;
  overflow-y: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.front {
  width: 100%;
  padding: 2rem 0;
}

h1 {
  font-weight: bold;
  font-size: 90px;
}

.lorem {
  font-size: 30px;
}

HTML代码（仅确保容器带有full-size类，结构无需修改）

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="https://getbootstrap.com/docs/5.2/assets/css/docs.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>

<nav class="navbar navbar-expand-lg">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">Brand Name</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarScroll" aria-controls="navbarScroll" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>
    <div class="collapse navbar-collapse" id="navbarScroll">
      <ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                    Tools
                  </a>
          <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Tool 1</a></li>
          </ul>
        </li>
      </ul>
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link" href="#">Sign Up</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Login</a></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container full-size">
  <div class="row text-center">
    <div class="front">
      <h1>Some Title</h1>
      <p class="lorem">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
  </div>
</div>
<footer class="py-3">
  <ul class="nav justify-content-center border-bottom pb-3 mb-3">
    <li class="nav-item"><a class="nav-link px-2 text-muted">Home</a></li>
    <li class="nav-item"><a class="nav-link px-2 text-muted">About</a></li>
    <li class="nav-item"><a class="nav-link px-2 text-muted">Privacy Policy</a></li>
  </ul>
  <p class="text-center text-muted">© 2022 Company, Inc</p>
</footer>

效果说明 #

• 大屏设备下：footer固定在页面底部，中间容器自动填充剩余空间，内容垂直居中展示
• 窗口缩小到内容高度超视口时：中间容器出现垂直滚动条，footer仍保持在视口底部
• div.front的内边距使用相对单位rem，随字体大小和屏幕尺寸自动适配，避免固定值的适配问题

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