必须让父容器是flex容器并设flex:1或flex-grow:1，否则h-100和height:100%因父元素无明确高度而失效；min-vh-100可占满视口但不填剩余空间；d-flex+flex-column+flex-grow-1是填充剩余垂直空间的唯一可靠路径。
必须让父容器是 flex 容器，并设 flex: 1 或 flex-grow: 1，否则仅靠 height: 100% 或 h-100 一定失败。
为什么 h-100 和 height: 100% 大概率不生效
这两个写法都依赖父元素有明确高度。而 Bootstrap 的 .container、.row、.col 默认不是 flex 容器，也不自动继承视口高度。常见现象是：加了 h-100 后容器高度为 0，内容直接塌缩。
- 检查 DevTools 中该容器的 computed
height—— 如果是0px，说明高度没撑起来 -
min-vh-100可以强制占满视口，但它不“填剩余空间”，而是固定占一整屏，不适合嵌套在已有布局中的场景 - 用
height: 100vh在内容超长时会截断或溢出，min-vh-100更安全，但仍不是“填剩余”
d-flex + flex-column + flex-grow-1 是唯一可靠路径
这是 Bootstrap 5+ 填充剩余垂直空间的标准模式，核心是让布局链上每一级容器都参与 flex 分配。
- 最外层容器（如
.page或.main）必须设d-flex flex-column，并有明确高度（如min-vh-100） - 需要“撑开”的中间容器（比如包裹表格的
.content）加flex-grow-1（等价于flex: 1） - 不要给子元素（如
.table-responsive）设固定height，否则会覆盖 flex 分配逻辑 - 示例结构：
<div class="d-flex flex-column min-vh-100">
<header>...</header><main class="flex-grow-1"><div class="container-fluid">
<div class="row">
<div class="col">
<div class="table-responsive">...</div>
</div>
</div>
</div>
</main><footer>...</footer>
</div>
常见踩坑点：.row 和 .container 不是 flex 容器
很多人以为 .row 天然是 flex 容器，其实 Bootstrap 5 的 .row 虽基于 flex 实现，但它默认只控制列间距（gutter），自身没有 display: flex 的 CSS 规则 —— 所以你不能对 .row 直接用 align-items-center 或指望它参与 flex 分配。
- 如果想让某个
.row填充剩余高度，必须显式加d-flex flex-column（或d-flex），再加flex-grow-1 -
.container和.container-fluid永远是块级元素，永远不带display: flex，别指望它们自动参与 flex 布局 - 嵌套层级越深，漏掉某一级
d-flex或flex-grow-1的概率越高，建议从最外层开始逐级检查 computed styles
Blazor / React 等框架中需额外注意高度继承
像 Blazor 的 .page 和 .main 这类自定义 wrapper，即使加了 d-flex，也常因父级未设高而失效。关键不是“有没有 class”，而是“有没有渲染出高度”。
- 确保
html和body有height: 100%（Bootstrap 不自动设，得自己补） - 在
.page上用min-vh-100比h-100更稳，避免内容少时高度不足 - 若使用
overflow: auto的容器（如.table-responsive），它不会自动继承父级 flex 分配的高度，必须确保其父元素已正确 flex-grow
真正难的不是写对那几个 class，而是确认整条高度传递链上每个节点都“知道自己有多高”。一旦某一级 computed height 是 0，后面所有 flex 分配都会归零。调试时优先看父容器的实际 height 值，而不是 class 列表。
