h-100在Bootstrap栅格中常不生效，根本原因是CSS百分比高度需父元素有明确高度；需确保html、body及容器链路（如.container、.row）均设height: 100%，或改用min-vh-100、flex-fill等更可靠的替代方案。
为什么 h-100 在 Bootstrap 栅格里经常不生效
直接给 col 或 row 加 h-100 通常没反应，根本原因是：Bootstrap 的 h-100 是基于 CSS height: 100% 实现的，而 CSS 中百分比高度生效的前提是父元素有明确高度（非 auto）。栅格容器（row）默认是 display: flex，但它的高度仍由内容撑开，不是继承父高。
常见错误现象：div class="col h-100" 看起来没变化，检查计算样式会发现 height 是 0 或 auto；浏览器开发者工具里看到元素“没占满”，其实不是类没加载，而是链路断在了上层。
- 父容器（比如
row）必须显式设高，或其父再上层有可继承的高度来源（如html, body { height: 100% }） -
row默认是flex-wrap: wrap，若子列换行，h-100会失效——因为 Flex 主轴方向高度不再可控 - 使用
min-vh-100替代h-100可绕过继承限制，但它是视口单位，语义不同
必须设置的父级高度链路
要让 h-100 在 col 上起作用，高度必须从根往下透传。最稳妥的写法是补全这一链：
html, body {
height: 100%;
}
.container, .container-fluid {
height: 100%;
}
.row {
height: 100%;
}
注意：.row 设 height: 100% 后，如果它内部有多个 col 且希望等高，还需加 d-flex flex-column 或确保父 row 是 flex 容器并设 align-items: stretch（默认已有）。否则单列可能“看起来”没填满，其实是 flex 子项未拉伸。
- 只设
html, body { height: 100% }不够——Bootstrap 的.container默认是min-height: auto - 如果用
vh单位（如min-vh-100），可跳过链路，但滚动时可能溢出或留白 - 在 Vue/React 组件中，若父组件没设高，光靠 Bootstrap 类无法突破渲染边界
h-100 和 d-flex + flex-fill 的区别
当目标是让列“填满剩余空间”（比如侧边栏 + 主内容区），h-100 往往不如 Flex 工具类可靠。因为 h-100 是静态继承，而 flex-fill 是动态分配剩余空间。
典型场景：两列布局，左侧固定宽，右侧需占满剩余高度并自适应内容滚动。
<div class="d-flex flex-column h-100">
<header>Header</header>
<div class="row flex-fill">
<div class="col-3">Sidebar</div>
<div class="col-9 d-flex flex-column">
<main class="flex-fill overflow-auto">Content</main>
</div>
</div>
</div>
-
flex-fill本质是flex: 1 1 auto，比h-100更适合流式布局 -
overflow-auto必须加在真正需要滚动的容器上，而不是col本身 - 避免对
col同时用h-100和flex-fill——CSS 层叠可能冲突，优先选后者
移动端适配与 flex-direction 变化的影响
Bootstrap 响应式类（如 col-md-6）改变列宽时，h-100 不会自动重算高度。更麻烦的是，当屏幕变窄触发堆叠（flex-direction: column），原本横向平铺的等高列会变成纵向排列，此时 h-100 可能导致某列异常拉长甚至遮挡内容。
解决思路不是禁用 h-100，而是控制它只在特定断点生效：
- 用
h-md-100、h-lg-100限定仅在中屏以上启用 - 堆叠后改用
min-h-md-100避免小屏强制等高 - 若需小屏也等高，考虑 JS 补偿（如监听
resize后手动设style.height），但代价高，慎用
真正的难点不在类名怎么写，而在你是否清楚当前布局是“由内容驱动高度”还是“由容器驱动高度”——前者不该强加 h-100，后者才需要补全高度链路。
