百分比高度height: 100%不生效，根本原因是父元素computed height为auto，浏览器无法计算像素值；必须确保html、body及所有中间父容器均有明确高度（如height: 100vh或逐层height: 100%），否则子元素高度退化为内容撑开。
百分比高度不生效，99%的情况是因为父元素的 height 计算结果是 auto，浏览器根本算不出“100%”对应多少像素。
为什么 height: 100% 在子元素上没反应
浏览器计算子元素 height: 100% 时，只看它的**直接父元素的 computed height**。如果这个值是 auto（比如默认的块级元素、display: flex 容器未设高、position: absolute 元素的包含块未定义高），那 100% × 0px = 0px，结果就是视觉上“塌了”或仅撑开内容行高。
常见错误现象：
- 写了
html, body { height: 100% }，但中间某层.wrapper是display: inline或float: left，它不再构成包含块，链路中断 - 父容器用了
min-height: 400px却没写height，height: 100%不认min-height - Grid/Flex 容器本身
height: auto，子项写height: 100%或grid-template-rows: 1fr都分不到空间
怎么确认是不是父元素没高
打开开发者工具，选中目标子元素 → 切到 “Computed” 面板 → 找 height 行：
立即学习“前端免费学习笔记（深入）”；
- 如果是
auto，说明包含块没提供高度基准 - 如果是具体像素（如
720px），说明链路通了，问题在更下层或样式被覆盖 - 重点要逐层往上点：从子元素 → 父容器 →
body→html，每层都查height的 computed 值
别跳过这步——很多人卡在第三层，比如 .main 加了 position: absolute，它脱离文档流后，子元素的包含块就回退到 html，而 html 又没设高，整条链就断了。
height: 100vh 能绕过问题，但有硬伤
100vh 直接取视口高度，不依赖父级链路，所以一写就见效。但它不是万能解，真实项目里容易翻车：
- iOS Safari 地址栏收起/展开时，
vh值会重算，页面突然跳动 - 放在
overflow: auto的滚动容器里，100vh会让子元素溢出该容器，而不是填满它 - 有
position: fixed头部时，100vh仍按全屏算，底部常留白或被遮挡 - 用户缩放页面（Ctrl + / Cmd +），
vh不随布局缩放，而百分比链路下的height: 100%更稳定
真正需要“填满父容器”的场景（比如嵌套 Grid 子项、Flex 区域内再嵌 Flex），100vh 会破坏层级关系，此时必须回归显式高度链。
Flex 和 Grid 容器里怎么让子项高度生效
Flex 和 Grid 本身不自动提供高度上下文。它们的子项写 height: 100% 前，容器自己得先有明确高度：
- Flex 容器不能只靠
display: flex，必须加height: 100vh或从根开始逐层height: 100% - Grid 容器同理：
grid-template-rows: 1fr 2fr依赖的是容器的可用高度，如果容器height: auto，1fr就分不到空间 - Safari 14–15.6 有兼容坑：即使父容器写了
height: 100vh，子项height: 100%也可能被忽略，解法是删掉子项的height: 100%，改用默认align-items: stretch+ 确保父容器有显式高 - 避免在 Flex 子项上同时写
min-height: 0和height: 100%，Safari 15.4 曾因此完全忽略高度声明
最容易被忽略的，不是“要不要设高”，而是“设了高但没生效”——因为你没打开开发者工具，逐层点开看 computed height 到底是不是像素值。高度链比宽度链脆弱得多，任何一层 auto，后面全白搭。
