vh-100 比 h-100 更常用，因其直接基于视口高度、不依赖父元素高度声明；而 h-100 在父级 height: auto 时失效，尤其在 Bootstrap 的 .row/.col 等无显式高度的组件中几乎无效。
为什么 vh-100 比 h-100 更常用
vh-100 直接设为视口高度的 100%，不依赖父元素有没有高度声明；而 h-100 是 height: 100%，一旦父级（比如 body 或 .container）是 height: auto，它就彻底失效。Bootstrap 的 .row、.col 默认都不设高，所以单用 h-100 几乎总没反应。
常见错误现象：div class="row h-100" 在 DevTools 里 computed height 显示为 0 或 auto；加了 vh-100 后立刻变成 728px（当前视口高）。
- 优先用
vh-100给最外层语义容器（如<section>或包裹.container-fluid的<div>）设高 - 避免给
.row直接加vh-100：它本身是 Flex 容器，加了会和子.col的h-100冲突，导致高度叠加溢出 - 移动端 Safari 对
vh有地址栏收放 bug，可配合min-vh-100降级——Bootstrap 5 内置，比手写min-height: 100vh更稳
vh-100 和 min-vh-100 到底该选哪个
vh-100 是 height: 100vh，强制拉满一屏，内容超长时会被截断；min-vh-100 是 min-height: 100vh，至少撑满一屏，内容多了自动延展——后者才是多数“全屏布局”的真实需求。
典型场景：登录页背景图、首屏 Hero 区、带页脚的单页应用。如果用了 vh-100，用户滚动时底部内容突然消失，就是它在作祟。
- 内容确定不会超出一屏（如纯静态 Banner）→ 可用
vh-100 - 内容长度不确定（含表单、动态列表、富文本）→ 必须用
min-vh-100 - 页脚要沉底？光靠
min-vh-100不够，得配d-flex flex-column+flex-grow-1主内容区
为什么加了 vh-100 还是没填满视口
最常被忽略的是 html 和 body 的默认 margin/padding 和高度塌陷。即使你给 <div class="container-fluid vh-100"> 加了类，只要 body 没显式设高，vh-100 就可能被父级盒模型压缩或偏移。
调试时打开 DevTools，检查目标元素的 computed height 和 box-sizing，再往上逐级看 html → body → 父 <div> 的 height 和 overflow 值。
- 必须加
html, body { margin: 0; padding: 0; height: 100%; }才能确保vh-100生效环境干净 - Bootstrap 的
.container-fluid有左右padding，若需真·贴边，得额外加mx-n3或自定义style="padding: 0;" - 滚动条占位会影响
100vh计算：Windows Chrome 下，出现滚动条时视口变窄，但vh值不变，导致右侧出现空白
Flex 布局下 vh-100 和 align-items-center 配合要点
align-items-center 要生效，前提是父容器是 Flex（d-flex）且有足够垂直空间。只加 vh-100 不够，因为 vh-100 设的是 height，不是 display 类型。
典型失败案例：给 <div class="row vh-100 align-items-center"> 加类，但没加 d-flex —— align-items-center 完全不触发。
- 正确组合：
<div class="d-flex align-items-center justify-content-center min-vh-100"> - 图片垂直居中时，别在
<img>上加vertical-align: middle：它对display: block无效，Bootstrap 的d-block工具类会让它失效 - 如果子元素是
.col，记得它默认有padding，居中后可能视觉上偏移，可用p-0清除
vh-100 和 Bootstrap 的 padding、gap、max-width 以及移动端滚动条共存时的隐性相互作用。 
