直接给 .container 加 height: 100vh 不行，因其默认高度由内容撑开，强制设置会导致溢出截断，且 .container 不继承父高，height: 100% 在 html/body 未设高时无效；应将 min-vh-100 加在 .container 的父级（如 section），并确保 html、body { margin: 0; padding: 0; height: 100%; }，有 header/footer 时需配合 flex 布局与 flex-grow-1，iOS Safari 下还需 min-height: 100% 兜底。
为什么直接给 .container 加 height: 100vh 不行
因为 .container 是宽度受限的块级元素，它默认高度由内容撑开；加 height: 100vh 会强制拉满视口，但一旦内容超出就溢出被截断，且它仍受父级 padding、margin 或 overflow 限制。更关键的是：Bootstrap 的 .container 本身不继承父容器高度，height: 100% 在没设 html 和 body 高度时完全无效。
应该用 min-vh-100 而不是 vh-100
min-vh-100 是 Bootstrap 5.1+ 内置工具类，表示“最小高度为视口 100%”，内容少时撑满，内容多时自动延伸——这才是全屏背景或布局的真实需求。而 vh-100 是强制等高，容易导致文字被裁、按钮不可见。
- 对需要全高展示的外层区块（如
<section>或<div class="hero">）直接加min-vh-100 - 别加在
.container上，优先加在它的父级（比如<section class="min-vh-100"><div class="container">...</div></section>） - 必须同步重置
html和body：html, body { margin: 0; padding: 0; height: 100%; }，否则某些嵌套场景下min-vh-100仍可能塌缩
有 header/footer 时不能只靠 min-vh-100
如果页面含固定头部和底部，min-vh-100 会让整个容器占满全屏，把 footer 挤到视口外。此时必须用 Flex 布局做减法：
- 给
<body>加d-flex flex-column min-vh-100 - 给
<main>加flex-grow-1，它会填满剩余空间 - 把
.container放进<main>里，它自然获得“剩余高度” - 注意：若
<main>内还有 flex 子项（如侧边栏+主内容），需额外加min-height: 0防止高度计算失效
iOS Safari 下 vh 会跳变，得降级兜底
移动端 Safari 在地址栏收放时会动态调整 vh 值，导致容器高度闪动。仅靠 min-vh-100 不够稳妥：
立即学习“前端免费学习笔记（深入）”；
- 加
min-height: 100%作为后备：它依赖html, body { height: 100% }，虽不如vh精准，但在 Safari 地址栏变化时更稳定 - 避免单独用
height: 100vh，尤其在背景图或模态框中——它在 Safari 中抖动最明显 - 如需极致兼容，可用 JS 动态读取
window.innerHeight并写入 CSS 变量，但多数项目用min-vh-100+min-height: 100%组合已足够
.container-fluid 和 min-vh-100，只要 body 有默认 margin 或父级设置了 overflow: hidden，高度照样被截断。 
