height: 100% 失效是因为父级链中存在 height: auto 的元素，导致无法提供计算基准；必须从 html、body 起逐层设置明确高度（如 height: 100% 或 min-h-screen），并避免 inline/table-cell/float 等破坏包含块的显示模式。
百分比高度 height: 100% 失效，几乎总是因为父级链中某一层高度不可计算——不是你写错了，是浏览器根本算不出“100% 等于多少像素”。
为什么 height: 100% 在父元素是 auto 时直接被忽略
CSS 规范要求：百分比高度必须基于一个**有明确数值的高度值**（如 500px、100vh、80% 且其父级可计算）来计算。父元素若为 height: auto（默认值），就等于没有提供参考基准，height: 100% 就退化为无效声明，浏览器按内容高度渲染。
常见现象：
- 给
.content写h-full，但页面只显示一行文字高度 - 开发者工具里看到 computed height 是
auto而非具体数值 -
width: 100%正常，height: 100%却没反应——宽度有默认上下文（块级元素自动占满父宽），高度没有
哪些父级必须显式设高才能让 height: 100% 生效
从目标元素往上查，只要其中一层是 auto，整条链就断了。关键节点包括：
立即学习“前端免费学习笔记（深入）”；
-
html和body必须同时设height: 100%——只设body没用，html是它的父级 - 中间所有嵌套容器（比如
.wrapper、.main、.grid-container）都得有明确高度：height: 100%或具体值（如h-96、min-h-screen） - 避免父级用了
display: inline、display: table-cell、float——这些会让它无法作为有效的“包含块” - Flex 容器虽能生成高度上下文，但前提是它自身高度已确定；否则子项写
height: 100%仍会失效
用开发者工具快速定位哪一层断了
打开浏览器 DevTools，选中目标元素，切换到「Computed」面板，看 height 是否为具体数值（如 420px、100vh）。如果是 auto，就说明它那一层的父级没传下高度。
操作建议：
- 逐级向上点击父元素，检查每一层的 computed
height - 重点盯
html→body→ 最外层布局容器（如.app）→ 目标父容器 - 发现某层是
auto，就在它的样式里加height: 100%或min-h-0（对 Flex/Grid 容器防拉伸干扰） - Grid 容器本身没高度时，
grid-template-rows: 1fr不会凭空造出空间——先让它有高，1fr才有意义
什么时候不该硬套 height: 100%
不是所有“想填满”的场景都适合 height: 100%。它依赖高度链，脆弱且难调试。
- 垂直居中或底部对齐：用 Flex 的
justify-content/align-items更稳 - Grid 子项填满轨道：靠默认
align-self: stretch，不用写h-full - 绝对定位子元素需撑高父级：父级必须加
position: relative+ 明确高度（如h-screen），否则子项脱离文档流后无法反向撑高 - 滚动区域内部填满：用
min-h-0配合height: 100%，防止子项 flex 拉伸破坏父容器高度
真正卡住人的，往往不是不会写 h-full，而是没意识到：你得先让浏览器“看见”高度，它才愿意算百分比。
