Bootstrap 5 辅助类 h-auto 与 h-100 区别-Bootstrap教程-PHP中文网

h-auto与h-100本质不同：h-auto移除高度限制，由内容撑开；h-100强制设为100%高度，依赖父容器有明确高度值，否则失效。

h-auto 与 h-100 的行为本质完全不同

h-auto 是移除元素的 height 声明，让高度完全由内容撑开（等价于 height: auto）；h-100 则强制设为 height: 100%，但这个百分比必须有明确参照——即父容器得有可计算的高度值，否则无效。两者不是“程度差异”，而是“有无约束”的根本区别。

为什么 h-100 经常不生效？

常见现象：给

 加了类，但高度还是塌缩成一行高。原因几乎总是父级链中断：

html 和 body 缺少 min-height: 100%（注意不是 height: 100%，否则超长内容会被截断）
中间某层容器（比如 .row 或自定义 div）用了 height: auto 或没设任何高度相关样式
在 Flex 容器中直接对子项用 h-100，而没配 flex-fill 或 flex-grow-1


简单说：h-100 不是“我要占满屏幕”，而是“我要占满我爹的高度”——如果爹没高，它就只能认命。
h-auto 在哪些场景下不可替代？
当你要解除第三方组件或旧 CSS 注入的固定高度限制时，h-auto 是最干净的解法：

某些图表库（如 Chart.js 封装组件）默认设了 height: 400px，加 h-auto 可让它随内容收缩
模态框内嵌的  被父级 h-100 锁死，导致无法自适应行数，换成 h-auto + min-height 更可控
配合 max-height 使用，实现“内容少时紧凑、多时滚动”：例如 h-auto max-h-60 overflow-y-auto


移动端和 Flex 布局里的隐藏冲突
iOS Safari 对 height: 100% 的计算有时会因字体渲染或 zoom 触发微小偏移，表现为底部漏白或滚动条闪现；而 h-auto 不参与该计算，更稳定。另外，在 d-flex 容器中：

											
												
												
													ZipCracker
													一款AI工具，主要用于面向CTF的ZIP破解与恢复，使用捆绑的ZipCracker引擎。当Codex或OpenClaw需要在授权情况下分析或恢复受加密ZIP时使用，适合需要提升相关任务效率的用户。
												
												下载
												
											
										

对子项用 h-100，若未加 align-self-stretch，可能被 flex 默认对齐方式覆盖
用 h-auto 反而更安全——尤其当子项本身是 position: absolute 或含 transform 时，避免 height 百分比在脱离文档流后失效

真正需要撑高时，优先考虑 vh-100（视口单位）或 flex-fill，而不是硬套 h-100；h-auto 的价值不在“撑”，而在“松绑”。