h-100不生效是因为height: 100%依赖父元素有显式高度，而Bootstrap默认父容器为height: auto；应优先用min-vh-100或Flex方案（d-flex + flex-grow-1）替代。
Bootstrap 5 没有提供像 h-25、h-50 那样的「百分比高度类」在默认 CSS 中生效——除非父容器明确设置了高度。直接写 h-100 却发现元素没变高，不是你用错了，是它根本没作用。
为什么 h-100 经常不生效
因为 CSS 中百分比高度（height: 100%）依赖父元素有**显式定义的高度值**（如 height: 400px 或 height: 100vh），而 Bootstrap 的 h-100 只是编译为 height: 100%，不会自动向上追溯或注入父级约束。
- 常见错误现象：
h-100套在div上，但父级是默认的height: auto，结果高度仍为内容撑开 - 移动端特别容易踩坑：视口变化时，
h-100不会随vh动态重算，需配合min-vh-100或 JS 补偿 - Flex 容器内慎用：若父级是
d-flex flex-column，子项设h-100可能被 flex 主轴行为覆盖，应改用flex-grow-1
min-vh-100 和 vh-100 的实际区别
这两个类都基于视口单位，但行为差异直接影响布局稳定性：
-
min-vh-100编译为min-height: 100vh：保证至少占满一屏，内容超长时可自然滚动，适合首页 Hero 区、登录页全屏背景 -
vh-100（需自定义或从 v5.3+ 开始部分构建版本支持）对应height: 100vh：强制截断超出部分，Safari iOS 上可能因地址栏缩放导致计算偏差，出现白边或滚动条卡顿 - 真实场景中，
min-vh-100更安全；若真需要严格 100vh，建议加overflow-y: auto并监听resize事件微调
替代方案：用 Flex 工具类代替高度类
当目标是「填满剩余空间」而非「固定高度」，h-100 是错的方向。Bootstrap 5 的 Flex 工具类更语义、更可靠：
- 父容器加
d-flex flex-column，子项用flex-grow-1实现“剩余高度占满”，无需关心父级 height 值 - 配合
min-vh-100+flex-column，可稳定实现「头部固定 + 内容区自适应 + 底部吸附」布局 - 避免嵌套多层
h-100：每层都要确保父级有高度，维护成本高且易断裂；Flex 方案只在关键容器上声明一次即可
真正难的不是选哪个类，而是判断场景该用「绝对高度约束」还是「弹性空间分配」——多数所谓“高度问题”，其实本质是主轴方向和增长逻辑没理清。
