因为h-100仅继承父容器高度，而Bootstrap默认的.container、.row、.col均无显式高度，全靠内容撑开；若父级computed height为auto，则100%即等于0px，导致高度失效。
为什么Bootstrap里加了h-100还是没高度
因为 h-100 只是 height: 100% 的快捷写法，它不创造高度源头，只继承——而 Bootstrap 默认的 .container、.row、.col 都没有显式高度，全靠内容撑开。你加了 h-100，但父级 computed height 是 auto，那 100% 就等于 0px。
常见错误现象：
- 给
.col-6加h-100，结果高度只有几像素 - 用
min-vh-100包住整个.container，但内部.row仍不拉伸 - Vue/React 组件里套 Bootstrap 栅格，
h-100完全不生效
关键点：
-
html和body必须有height: 100%（某些 reset CSS 会悄悄重置它） -
.container或.container-fluid得显式设height: 100%或min-height: 100vh -
.row默认是 flex 容器，但若被覆盖成display: block或float，h-100子项就失去拉伸基础 - 检查开发者工具的 “Computed” 面板：逐层点开，看每一级
height是不是具体像素值，只要出现一个auto，链路就断了
Bootstrap 5 中 .row 设 h-100 为什么没用
因为 .row 默认是 display: flex，但它的高度仍由父容器决定；如果父容器（比如 .container）是 min-height: auto，那 .row 的 height: 100% 就无处可乘。
更麻烦的是：即使 .row 高度算出来了，它的子项（.col）是否等高，还取决于 align-items: stretch 是否生效——而这又要求 .row 没被干扰：
- 移除
.col上的height、max-height、position: absolute - 避免在
.col内部用margin-top: auto或margin-bottom: auto，它们会破坏 stretch 行为 - 确认
.row的computed display真的是flex（不是被第三方样式或旧版降级覆盖） - IE11 不支持
align-items: stretch在 flex 容器中的完整行为，需降级方案
实操建议：直接给 .row 加 d-flex align-items-stretch，比单靠 h-100 更可靠。
用 d-flex + flex-fill 替代 h-100 的真实场景
当你需要“填满剩余空间”，而不是“继承父级 100%”，h-100 就容易翻车——比如侧边栏 + 主内容区布局中，主内容区要占满剩余高度，但父容器高度本身是动态的。
flex-fill 是 Bootstrap 5 提供的语义化工具类，它等价于 flex: 1 1 auto，本质是让元素参与 flex 剩余空间分配，不依赖父级有没有明确 height 值。
典型组合：
-
<div class="d-flex flex-column min-vh-100">—— 父容器设最小视口高 + 垂直堆叠 -
<header class="flex-shrink-0">—— 页头不缩放 -
<main class="flex-fill">—— 主体填满剩余空间 -
<footer class="flex-shrink-0">—— 页脚不缩放
注意：flex-fill 要求父容器是 display: flex，且不能有 min-height: 0 被 UI 库覆盖（Vant/Ant Design 常干这事），必要时手动加 style="min-height: 0"。
移动端 iOS Safari 下 vh-100 的跳动问题怎么绕开
vh-100 在 iOS Safari 地址栏收起/展开时不会重算，导致容器突然变高或变矮，页面视觉跳动。这不是 Bootstrap 的 bug，而是 100vh 规范本身的限制。
安全做法不是禁用 vh-100，而是分层兜底：
- 优先用
min-vh-100（min-height: 100vh），内容超长时不截断 - 现代浏览器可用
dvh-100（Bootstrap 5.3.3+ 支持），它响应地址栏变化，但需@supports (height: 100dvh)包裹降级 - 对 iOS 15 及更早版本，JS 动态注入
--vh变量：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px')，然后 CSS 中用height: calc(var(--vh, 1vh) * 100) - 监听
resize和orientationchange事件更新变量，别只监听resize
真正容易被忽略的，是没验证 .row 或 .col 的 computed height 是否真的被计算出来——很多人调了半天 h-100，其实问题出在第三层容器上，比如某个 .wrapper 被框架加了 display: inline-block，直接让它失去了作为包含块的资格。
