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 布局控制分配逻辑。
实操建议（Bootstrap 5）：
- 外层容器加
min-vh-100 d-flex flex-column - navbar 加
flex-shrink-0（防止被压缩） - main 区域加
flex-grow-1 overflow-auto（自动撑满 + 内部滚动） - 避免在
.container上直接加vh-100，应加在它的父级（如<main>或自定义 wrapperdiv）
<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 组合是最接近“开箱即用”的解法。
