直接给.container加height:100%或h-100无效，因其依赖父元素有明确高度，而Bootstrap默认.container、.row、.col非flex容器且不继承html/body高度，导致computed height为0px；唯一可靠路径是d-flex+flex-column+flex-grow-1组合，需逐级确保html/body设height:100%、最外层容器加min-vh-100、中间区块加flex-grow-1。
为什么直接给 .container 加 height: 100% 或 h-100 没用
因为 height: 100% 和 h-100 都依赖父元素有明确高度，而 Bootstrap 默认的 .container、.row、.col 不是 flex 容器，也不继承 html 或 body 的高度。常见现象是：加了之后 computed height 是 0px，内容直接塌缩。检查 DevTools 就能确认——如果高度没出来，说明整条祖先链都没设高。
必须用 d-flex + flex-column + flex-grow-1 这套组合
这是 Bootstrap 5+ 填满“剩余垂直空间”的唯一可靠路径，不是可选项，是必要条件。核心逻辑是让布局链每一级都参与 flex 分配：
-
html和body必须设margin: 0; padding: 0; height: 100%; - 最外层容器（如
<main>或自定义<div class="page">）加d-flex flex-column min-vh-100 - 需要撑开的中间区块（比如放表格或表单的
<section>）加flex-grow-1 -
.container放在该区块内部即可，它会自然获得分配到的高度
别在 .container 上硬加 height: 100vh——它不识别“剩余”，只认整个视口，有 header/footer 时必然错位。
有固定头部和底部时，.modal-body 或 .container 内部滚动失效怎么办
典型表现是加了 overflow-y: auto 却无法滚动，内容直接溢出。根本原因是 flex 子项默认 min-height: auto，会撑开父容器，导致 overflow 失效：
- 给包裹
.container或.modal-body的父级（如flex-grow-1的<main>）加style="min-height: 0"或自定义类.mh-0 -
.modal-body推荐用max-height: calc(100dvh - 120px); overflow-y: auto;，其中120px是 header + footer + padding 的估算值，按实际调整 - 避免对
.modal-content设height: 100dvh——它的 padding 会压缩内容区，且 iOS Safari 对dvh的支持虽已广泛，但旧版仍需兜底
iOS Safari 下高度跳变，怎么稳住
地址栏收放时 vh 值会突变，导致容器高度闪动甚至内容被裁。仅靠 min-vh-100 不够：
- 优先用
100dvh替代100vh（2023 年后标准，2026 年已覆盖主流 Safari） - 同时加
min-height: 100%作为后备，前提是html, body { height: 100% }已生效 - 若需极致稳定（如自助终端机），可用 JS 动态读取
window.innerHeight并写入 CSS 变量：:root { --vh: 100vh; }→document.documentElement.style.setProperty('--vh', `${window.innerHeight * 0.01}px`)
真正生效的关键不在你给哪个元素加了什么类，而在整条祖先链是否构成可控的 flex 高度分配体系——漏掉任何一级，都会断掉。
