h-25/h-50/h-75/h-100 表示父元素高度的百分比，若父元素无显式高度（如height: auto或未设置），则计算结果为0；需沿dom链逐级确保父级有明确高度（如min-height: 100vh），尤其html/body默认无高度。
h-25 / h-50 / h-75 / h-100 不是“设高度”，而是“设为父元素高度的百分比”——父元素没高度，它们就等于 0。
为什么 h-100 在 div 里完全没反应
常见错误：直接给一个 <div class="h-100"> 加类，但它的父容器（比如 <code> 或 <div>）没显式设置高度，或者用了默认的 <code>height: auto。
-
h-*类依赖父元素的计算高度，不是视口或文档流高度 - 如果父元素高度由内容撑开（
height: auto），那h-100就是100% of 0px→ 实际为 0 - 必须沿 DOM 链逐级确保每个父级都有明确高度（如
h-100、min-height: 100vh、或固定height: 400px） - 特别注意：
和默认无高度，需手动加min-height: 100vh才能让子链生效
h-25 到 h-100 的尺寸值和实际含义
这些类对应的是父元素高度的固定百分比，不是像素或 rem；且不支持响应式断点前缀（如 h-md-50 不存在）。
-
h-25→height: 25% -
h-50→height: 50% -
h-75→height: 75% -
h-100→height: 100% -
h-auto→height: auto（覆盖默认height声明） -
mh-100→max-height: 100%（更安全，常用于防溢出）
注意：h-* 的 CSS 优先级高于普通样式表中的 height，若想覆盖它，得用 !important 或改用 mh-* + 其他布局控制。
配合容器使用时的典型陷阱
在 Bootstrap 5 中，.container 和 .row 默认不设高度，直接套 h-100 几乎必然失败。
-
.container是width限定 +margin居中，height仍是auto -
.row是 flex 容器，但本身无高度，除非子项触发 BFC 或设了min-height - 正确做法示例：
<div class="min-vh-100 d-flex flex-column"> <div class="container h-100"> <div class="row h-100"> <div class="col h-100"></div> </div> </div> </div> - 更轻量替代：
min-vh-100（设最小高度为视口高）、d-flex+flex-fill比硬套h-100更可靠
真正卡住人的从来不是类名记不住，而是忘了 height 百分比在 CSS 里本就是个“链式依赖”行为——漏掉任意一环父级的高度声明，整个链就坍缩成 0。别只盯着目标元素加 h-100，先看它爹有没有 height。
