h-auto与h-100本质不同：h-auto移除高度限制，由内容撑开；h-100强制设为100%高度，依赖父容器有明确高度值，否则失效。
h-auto 与 h-100 的行为本质完全不同
h-auto 是移除元素的 height 声明，让高度完全由内容撑开（等价于 height: auto）；h-100 则强制设为 height: 100%，但这个百分比必须有明确参照——即父容器得有可计算的高度值，否则无效。两者不是“程度差异”，而是“有无约束”的根本区别。
为什么 h-100 经常不生效？
常见现象：给 <div class="h-100"> 加了类，但高度还是塌缩成一行高。原因几乎总是父级链中断：
<ul>
<li>
<code>html 和 body 缺少 min-height: 100%（注意不是 height: 100%，否则超长内容会被截断）
.row 或自定义 div）用了 height: auto 或没设任何高度相关样式h-100，而没配 flex-fill 或 flex-grow-1
简单说：h-100 不是“我要占满屏幕”，而是“我要占满我爹的高度”——如果爹没高，它就只能认命。
h-auto 在哪些场景下不可替代？
当你要解除第三方组件或旧 CSS 注入的固定高度限制时，h-auto 是最干净的解法：
- 某些图表库（如 Chart.js 封装组件）默认设了
height: 400px，加h-auto可让它随内容收缩 - 模态框内嵌的
<textarea></textarea>被父级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 容器中：
- 对子项用
h-100，若未加align-self-stretch，可能被 flex 默认对齐方式覆盖 - 用
h-auto反而更安全——尤其当子项本身是position: absolute或含transform时，避免 height 百分比在脱离文档流后失效
真正需要撑高时，优先考虑 vh-100（视口单位）或 flex-fill，而不是硬套 h-100；h-auto 的价值不在“撑”，而在“松绑”。
