min-vh-100更稳妥，因其设min-height: 100vh，内容超长时自动撑高、仅一条滚动条；而vh-100锁死height: 100vh，易致截断、重叠及safari地址栏收放引发的布局跳变。

直接设 min-vh-100，但必须确保 html 和 body 不被 js 或框架重置为 height: auto，否则会失效。

为什么 min-vh-100 比 vh-100 更稳妥

min-vh-100 是 Bootstrap 5+ 内置类，等价于 min-height: 100vh。它不强制截断内容，内容超出时自动撑高，只有一条滚动条；而 vh-100（即 height: 100vh）在内容超长时会把溢出部分裁掉，还可能和固定导航栏重叠。

• 移动端 Safari 地址栏收放会导致 vh 值跳变，min-vh-100 表现更稳
• 若需精确定位（如按钮居中），可考虑 height: 100dvh（现代浏览器支持），但别用在兼容性要求高的项目里
• 旧版 Bootstrap 4 没有 min-vh-100，得手动写 min-height: 100vh

min-vh-100 失效的三个高频原因

DevTools 看着类都加对了，高度就是不生效——大概率卡在这几个地方：

VPS Bootstrap

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

下载

• html 或 body 被 JS 动态加了 style="height: auto"（比如某些 UI 初始化脚本）
• 容器外层套了没设高度的 <div>，中断了高度传递链 <li>用了 <code>.container 或 .row 但没处理它们的父级高度：它们默认 height: auto，min-vh-100 在子元素上就失去参照

Flex 布局下怎么让内容区“吃掉剩余空间”

仅靠 min-vh-100 无法解决“内容少时页脚飘在中间”的问题。这时要靠 Flex 主轴分配：

• 给最外层容器（比如 或包裹 .container 的 <div>）加 <code>d-flex flex-column min-vh-100
• 主内容区（如 <main></main>）加 flex-grow-1，它会填满剩余空间
• 页脚不用设高度，但避免用 margin-top: auto——旧版 Safari 对这个有渲染 bug

真正麻烦的不是加哪个类，而是检查整个 HTML 结构有没有“意外插入的、没设高度的父容器”，以及有没有第三方脚本偷偷重写了 html 或 body 的内联样式。