Bootstrap 5 辅助类 vh-100 与 min-vh-100 区别-Bootstrap教程-PHP中文网

min-vh-100 是安全选择，因其设最小高度为视口高且内容可自然撑开；vh-100 锁死高度易致截断、滚动失效、页脚悬空，尤其在移动端 Safari 中因地址栏收放引发布局跳变。

bootstrap 5 辅助类 vh-100 与 min-vh-100 区别

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 不依赖父级，自己就能立住。两者混用时，常见错误是：

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

给 加 min-vh-100，但没处理 html 和 body ——结果 computed height 还是 auto，因为父链塌了
在上用 min-vh-100，又给子加 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 自身不继承高度，它只是“宽度流式”，高度仍需显式声明。