d-flex容器height:100%失效是因为父级高度链断裂，必须确保html、body及所有中间父元素均有明确高度（如height:100%或min-vh-100），否则计算结果为0px。
Bootstrap 弹性容器（d-flex）本身不提供高度，height: 100% 在它身上失效，是因为它的父级链中至少有一层没设显式高度——不是 Bootstrap 的 bug，是 CSS 百分比高度的计算规则使然。
为什么 d-flex 容器的 height: 100% 总是算出 0px
Flex 容器默认 height: auto，而 height: 100% 是个“依赖型”声明：它需要从 html 开始，每一层父元素都给出明确的 computed height（比如 100%、100vh 或具体像素值）。只要中间某层是 auto，整条链就断了。
-
html和body必须同时设height: 100%——漏掉html，body { height: 100% }就等于100% × 0px - Bootstrap 的
.container、.row默认都不是 flex 容器，也不带高度；即使你给它加了d-flex，它自身仍无高度，除非你额外加height: 100%或min-vh-100 - 用开发者工具点开该
d-flex元素 →「Computed」→ 查height值：如果是auto或0px，说明上游断了
d-flex 嵌套时，flex-grow-1 为什么没用
Flex 子项的 flex-grow: 1 只在父容器有明确高度的前提下才起作用。如果父容器高度是 auto，那“剩余空间”就是 0，flex-grow 就没东西可分。
- 常见错误结构：
<div class="d-flex flex-column"> <header></header><main class="flex-grow-1"></main> </div>—— 但外层div没设高度，flex-grow-1就无效 - 修复方式：外层必须有高度基准，比如加
min-vh-100或style="height: 100vh" - 更稳妥写法：
，再让<main></main>加flex-grow-1—— 这样高度链从body就锚定了
移动端和 Safari 下的隐藏陷阱
iOS Safari（尤其 14–15.6）对 height: 100% 有已知兼容问题：即使父级设了 100vh，子元素仍可能被忽略。这不是配置错，是渲染引擎缺陷。
- 临时绕过：给
d-flex容器加min-height: 0，强制触发高度重计算（Safari 有时需要这个“提示”） - 更稳方案：放弃
height: 100%，改用top: 0; bottom: 0;（适用于position: relative或absolute场景） - 避免混用：
.col-6自带flex: 0 0 50%，和flex-grow-1冲突；想等高填满，优先用d-flex + flex-column + flex-grow-1，别依赖栅格列的百分比高度
真正卡住人的从来不是类名写错，而是忘了 html 和 body 这两个最顶层的“地基”。每加一层 d-flex，都要确认它上面有没有被撑起来的高度——否则它只是个看不见的、height: auto 的透明盒子。
