min-vh-100 是安全选择，因其设最小高度为视口高且内容可自然撑开；vh-100 锁死高度易致截断、滚动失效、页脚悬空，尤其在移动端 Safari 中因地址栏收放引发布局跳变。
vh-100 会强制截断内容，min-vh-100 才是安全选择
直接结论：vh-100 是 height: 100vh，它把元素高度**锁死**在视口高度；min-vh-100 是 min-height: 100vh，只保证**至少一屏高**，内容多了就自然撑开。绝大多数场景下该用后者，否则页面稍长就会底部被切掉、滚动失效或页脚悬空。
为什么 vh-100 在移动端和 Safari 里特别危险
移动端 Safari 的地址栏收放会动态改变 vh 值——页面加载时算的是“地址栏展开”状态下的视口，滚动后地址栏收起，100vh 突然变大，导致布局跳变、背景错位、按钮消失。而 min-vh-100 不依赖实时 vh 计算，只设下限，天然规避这个问题。
- 调试时可临时加
border: 1px solid red看容器是否真占满一屏 - 若必须兼容旧版 Safari（iOS 14.5 以下），建议降级为
style="min-height: 100%"+html, body { min-height: 100%; } -
vh-100在 Bootstrap 5 中存在，但文档里几乎不提——它不是为常规布局设计的，更适合模态框遮罩层这类“必须严丝合缝盖住视口”的场景
h-100 和 min-vh-100 混用时最容易踩的坑
h-100 是 height: 100%，它需要父级有明确高度才能生效；min-vh-100 不依赖父级，自己就能立住。两者混用时，常见错误是：
- 给
<div class="container"> 加 <code>min-vh-100，但没处理html和body——结果 computed height 还是 auto，因为父链塌了 - 在
<div class="row"> 上用 <code>min-vh-100，又给子<div class="col"> 加 <code>h-100：此时h-100实际参照的是row的 content box 高度，但row默认有gap，会导致子列高度计算偏小 - 用
vh-100替代min-vh-100后发现页脚不贴底——因为height: 100vh把整个容器压成固定高，footer 被挤出可视区外
真正要全屏的容器，别套 .container
.container 和 .container-fluid 都带 padding 和 max-width，即使加了 min-vh-100，视觉上也会“顶不到头”或“左右留白”。全屏背景、登录页、引导页这类需求，应该绕过容器，直接作用于语义化外层标签：
<section class="min-vh-100 d-flex align-items-center justify-content-center"> <div>居中内容</div> </section>
如果非要用 .container-fluid，记得手动重置： class="container-fluid p-0"，并确认父级（如 section）已设 min-vh-100 ——container-fluid 自身不继承高度，它只是“宽度流式”，高度仍需显式声明。
