必须设置 html, body { min-height: 100%; }，再给容器设 min-height: 100vh 或 vh-100，否则因父级“塌陷”导致高度失效；使用 h-100 前需确保父元素有明确高度，Flex 布局（d-flex + flex-fill）更可靠。
直接设 min-height: 100vh 就够了，但必须确保父级链不“塌”
bootstrap 容器（比如 .container 或 .container-fluid）默认不会撑满视口高度，因为它的高度由内容决定。想让它“至少占满一屏”，最直接的方式就是加 min-height: 100vh。但常见错误是只给容器设了，却忘了 html 和 body 默认没有高度约束——它们会“塌”成内容高，导致 100vh 实际计算失效。
-
html, body { min-height: 100%; }是必要前提（注意不是height: 100%，否则内容超长时会被截断） -
.container-fluid { min-height: 100vh; }才能真正生效 - 如果容器嵌在
.row里，且你希望它继承父高，.row也得加min-height: 100%（否则 flex 布局下可能不传递高度）
用 h-100 类？小心它只对“已知高度的父容器”有效
Bootstrap 4+ 提供了响应式高度工具类，比如 h-100（等价于 height: 100%）。但它不是万能的：它要求父元素有明确的高度值（不能是 auto），否则 100% 就没参照物。
- 适用场景：
.row已通过min-height: 100vh设定高度，再给子.col加h-100，就能让列拉满 - 不适用场景：直接给
.container-fluid加h-100，而没处理html/body，结果是无效的 - 兼容性注意：
h-100在 IE10+ 有效，但旧版 Flex 布局支持差，若需兼容 IE9 及更早，只能靠 JS 或 fallback CSS
背景图容器要“视觉满屏”？别只靠 min-height
很多开发者设了 min-height: 100vh，却发现背景图没铺满——问题常出在 background-size: cover 遇到窄高比（比如手机竖屏）时裁剪过度，或容器 padding/margin 挤压了可用空间。
- 检查是否意外加了
padding或margin：Bootstrap 的.container默认有水平 padding，用.container-fluid更干净 - 背景图居中 + 覆盖建议组合：
background-size: cover; background-position: center center; background-repeat: no-repeat; - 如果容器内有内容要垂直居中，别只依赖
min-height，配合d-flex align-items-center justify-content-center更可靠
Flex 布局是更健壮的替代方案，但别滥用 height: 100%
当你要多个并列区域（如侧边栏 + 主内容）都占满剩余高度，用 display: flex 比层层设 height: 100% 更稳——后者在任意一环缺失高度声明就会中断传递。
- 推荐结构：
<div class="d-flex flex-column vh-100"> <header>...</header><main class="flex-fill">...</main> </div> -
vh-100替代min-height: 100vh，语义更准；flex-fill让主区自动填满剩余空间 - 避免陷阱：不要给 flex 子项同时设
height: 100%和flex相关属性，容易冲突
html 或 body 这一级，后面所有设置都白搭。
