vh-100 在 bootstrap 容器中无效，因容器默认 display: block 且无 min-height，而 vh-100 仅设 height；需确保 html/body 高度为 100%，并配合 d-flex flex-column 或改用更安全的 min-vh-100。

为什么 vh-100 在 Bootstrap 容器里没效果？

直接给 .container 或 .container-fluid 加 vh-100 类，往往高度还是塌缩——根本原因是容器默认是 display: block 且不设 min-height，而 vh-100 实际作用的是 height，不是最小高度。父元素（比如 body、html）若没显式撑开，子元素的 100vh 就会失效。

常见错误现象：vh-100 加了但容器只高几像素，或滚动条消失后内容被截断。

• 确保 html 和 body 的高度为 100%（不是 100vh）
• vh-100 类本身只设置 height: 100vh，对 flex 布局容器不够用，需配合 d-flex flex-column
• 如果容器内有 navbar、footer 等固定区域，单纯 vh-100 会导致内容溢出，得改用 min-vh-100 或计算剩余高度

min-vh-100 比 vh-100 更安全吗？

是的。min-vh-100 设置的是 min-height: 100vh，允许内容自然撑高容器，避免因内容超长时被截断。而 vh-100 是硬性限制高度，内容多时会溢出或触发隐藏滚动（除非加 overflow-auto）。

使用场景：登录页、介绍页等单屏展示需求；或作为布局基底容器，内部再用 flex 分配子区域。

• Bootstrap 5+ 默认提供 min-vh-100，无需额外 CSS
• 若用在 .row 或 .col 上，注意它们默认不设高度，仍需父级支持（如 d-flex flex-column）
• 在 Safari 旧版本中，min-vh-100 对 position: sticky 子元素可能计算异常，可临时用 height: 100vh + overflow: hidden 回退

如何让容器填满视口并正确容纳 navbar + main？

典型布局需要顶部导航栏固定、主内容区自适应填满剩余空间——这时不能只靠 vh-100，得用 flex 布局控制分配逻辑。

VPS Bootstrap

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

下载

实操建议（Bootstrap 5）：

• 外层容器加 min-vh-100 d-flex flex-column
• navbar 加 flex-shrink-0（防止被压缩）
• main 区域加 flex-grow-1 overflow-auto（自动撑满 + 内部滚动）
• 避免在 .container 上直接加 vh-100，应加在它的父级（如 <main></main> 或自定义 wrapper div）

<div class="min-vh-100 d-flex flex-column">
  <nav class="navbar navbar-expand navbar-light bg-light flex-shrink-0">...</nav><main class="flex-grow-1 overflow-auto"><div class="container py-4">...</div>
  </main>
</div>

移动端键盘弹出时 100vh 失效怎么办？

iOS 和部分 Android 浏览器在软键盘弹出时会动态缩放视口，导致 100vh 计算值变小（有时只剩半屏），这是浏览器行为，非 Bootstrap 缺陷。

绕过方式有限，优先级如下：

• 用 min-vh-100 替代 vh-100，至少保证不小于原始视口
• 监听 resize 事件，用 JS 动态设置 style.height = window.innerHeight + 'px'（注意防抖）
• 对表单页，干脆放弃全屏高度，用 flex-grow-1 + overflow-auto 更可靠
• 避免在输入框聚焦时触发动画或高度重排，会加剧渲染错乱

这个坑没有银弹，能不用绝对高度就不用；真要撑满，flex + min-vh-100 组合是最接近“开箱即用”的解法。