vh-100不生效是因为父级（html/body）无明确高度导致高度链断裂；必须设置html, body { height: 100% }，再用h-100逐层传递，或改用min-vh-100避免视口变化问题。
为什么 vh-100 在 Bootstrap 容器里不生效
直接给 .container 或 .container-fluid 加 vh-100 类，大概率没反应——不是类写错了，是父级高度塌陷了。bootstrap 的容器默认是 display: block 且不设高度，vh-100 虽然等价于 height: 100vh，但 css 中百分比高度必须依赖父元素有明确高度才能计算。而 <body> 和 <html> 默认是“内容高度”，不是 100% 视口。
-
<html>和<body>都得显式设height: 100%或min-height: 100% - 如果用了
navbar等固定定位组件，vh-100会把内容顶出视口，此时更适合用min-vh-100 - Bootstrap 5.3+ 中
vh-100是响应式类（如vh-100,vh-sm-100），但仅控制height，不处理margin或padding溢出
正确写法：从根节点开始链式撑高
最稳妥的方式是逐层声明高度来源，避免依赖隐式继承：
<html class="h-100">
<body class="h-100">
<div class="container h-100">
<!-- 内容 -->
</div>
</body>
</html>注意：h-100 是 Bootstrap 的高度工具类，等价于 height: 100%；它和 vh-100（height: 100vh）语义不同：h-100 依赖父级高度，vh-100 直接锚定视口。多数场景下，用 h-100 + 根元素撑高更可控。
- 若页面有
navbar-fixed-top，vh-100容器会和导航重叠，改用min-vh-100更安全 - Flex 布局下可配合
d-flex flex-column让子元素占满剩余空间，比纯高度类更灵活 - 不要在
<main>外层再套一层无样式的<div>，它可能中断高度传递链
vh-100 和 min-vh-100 的实际差异
关键不在“最小”二字，而在渲染行为：
-
vh-100强制高度 = 视口高度，内容超长时出现双滚动条（页面滚动条 + 容器内滚动条） -
min-vh-100保证至少占满视口，内容多时自动撑高，只有一条滚动条 - 移动端 Safari 对
vh单位有兼容问题（地址栏缩放导致视口高度跳变），min-vh-100表现更稳定 - 如果你用的是
position: absolute容器，vh-100可能比h-100更合适，因它不依赖父级高度
调试时容易忽略的三个点
Chrome DevTools 里看着类都加对了，但高度就是不对，往往卡在这几个地方：
- 检查
<html>是否被 JS 动态加了style="height: auto"（比如某些 UI 框架初始化脚本） - Bootstrap 的
.container默认有左右padding，若内部元素设width: 100%，会溢出；应改用w-100或flex-grow-1 - 使用
vh-100后内容被截断？大概率是父级存在overflow: hidden（常见于navbar或自定义 wrapper）
视口单位不是银弹，真正填满屏幕的关键不是某个类名，而是高度传递链是否完整、是否有意外的 overflow 或 position 干扰。先确认 <html> 和 <body> 的 computed height 是多少，再往上查。
