bootstrap的.container默认不占满屏幕高度是因其高度由内容撑开，需通过d-flex+flex-column+flex-grow-1逐层设置高度传递，并配合min-vh-100或min-height: 0等措施实现剩余空间填充，单纯height: 100vh易导致遮挡或ios兼容问题。
Container 高度不占满屏幕的常见原因
Bootstrap 的 .container 默认是内容宽度自适应、高度由子元素撑开的——它根本不会主动占满剩余视口高度。你看到“没铺满”，不是写法错了，而是 CSS 默认行为如此。关键在于：Bootstrap 本身不提供“填满剩余高度”的布局逻辑，得靠你手动补上 Flexbox 或 viewport 单位。
用 d-flex + flex-column 实现垂直填满
最可靠、兼容性好（Bootstrap 4/5/6 都适用）的方式是把父容器设为 flex 容器，并让子元素（比如 .container）占满剩余空间。注意必须逐层设置高度传递：
-
html和body要设height: 100%（否则100vh不必要，但 flex 布局更可控） - 外层包裹元素（如
<div class="d-flex flex-column min-vh-100">）启用 flex 布局 <li>把 <code>.container放进一个flex-grow-1的子容器里，而不是直接加在 flex 容器上——否则它会和 navbar/footer 冲突
<header>...</header><main class="flex-grow-1"><div class="container">这里就铺满剩余高度了</div> </main><footer>...</footer>
为什么不能只给 container 加 height: 100vh？
100vh 是整个视口高度，不是“剩余”高度。如果页面有固定 header 或 footer，.container 加 height: 100vh 会导致滚动条或内容被遮挡。更糟的是，在 iOS Safari 中 100vh 会包含地址栏区域，缩放时值还会变——它根本不稳定。
- 用
min-vh-100只适合全屏单页，无 header/footer 场景 - 有导航栏时，必须用 flex 布局做减法，靠
flex-grow-1动态分配空间 - 若用 CSS Grid 替代（如
grid-template-rows: auto 1fr auto），需确保 Bootstrap 不覆盖你的display: grid
遇到 overflow-y: auto 却不生效？检查这些点
想让 .container 内部滚动（比如侧边栏+主内容分栏），但加了 overflow-y: auto 没反应——大概率是高度没真正算出来：
- 父级（比如
.flex-grow-1包裹层）缺少min-height: 0：Flex 子项默认最小高度是内容高度，会撑开容器，导致 overflow 失效；加style="min-height: 0"或自定义 class 解决 - Bootstrap 5.3+ 默认给
.container设了max-width，但它不影响高度；真要限制高度得额外加max-height: 100% - 别在
.container上直接写height: 100%，它没有计算上下文；必须确保其父级已明确高度（flex 或 vh）
flex-column 套壳，flex-grow-1 托底，min-height: 0 防溢出。其他写法要么漏兼容性，要么在嵌套深了之后失效。
