height: 100% 失效的根本原因是父元素 computed height 为 auto，导致计算结果为 0px；需逐层检查 computed height，优先用 flex: 1 替代 height: 100%，并注意 box-sizing、定位与布局模式干扰。
因为 height: 100% 不是“填满父容器”，而是“取父元素计算后的高度值再乘以 100%”；如果父元素的 computed height 是 auto（比如没设 height、min-height，或被 Flex/Grid 默认行为撑成 auto），那 100% × 0px = 0px —— 子盒子自然塌缩。
检查父元素 computed height 是否为 auto
这是最直接的判断依据，不是猜，是看：
- 打开浏览器开发者工具，选中目标子元素 → 切到 “Computed” 面板 → 找
height行 - 如果显示
auto，说明链路断了；如果是具体像素（如428px）或100vh，说明父级有高，问题在更下层或样式被覆盖 - 必须逐层往上点：子 → 父 → 祖父 →
body→html，中间任何一层是auto，整条百分比链就失效 - 特别注意：
position: absolute元素的包含块可能跳过视觉父级，回退到html或视口，此时要查的是那个“真正包含块”的高度
Flex 容器里写 height: 100% 反而禁用拉伸
Flex 子项一旦声明 height: 100%，浏览器就认为你手动接管高度控制，会忽略默认的 align-items: stretch 行为 —— 即使父容器有明确高度，子项也不会自动拉伸。
- 删掉所有子元素上的
height: 100%、min-height: 100%、max-height: 100% - 想填满剩余空间？直接用
flex: 1（等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0） - 嵌套 Flex 时，子 Flex 容器需加
min-height: 0，否则默认min-height: auto会阻止内部flex: 1生效 - 别同时写
align-self: stretch和height: 100%—— 前者是默认行为，后者冗余且在 Safari 14–15.6 中可能触发兼容问题
用 100vh 能绕过，但不是万能解
100vh 不依赖父级高度链，所以一写就见效，但它把“填满父容器”偷换成了“填满视口”，实际项目中容易翻车：
- iOS Safari 地址栏收/放时，
vh值重算，页面突然跳动 - 放在
overflow: auto的滚动区域里，100vh会让子元素溢出该区域，而不是填满它 - 有
position: fixed头部时，100vh仍按全屏算，底部常留白或被遮挡 - 用户缩放页面（
Ctrl +/Cmd +），vh不随布局缩放，而百分比链路下的height: 100%更稳定 - 真正需要“嵌套填满”（比如 Grid 区域内再套 Flex），
100vh会破坏层级语义，必须回归显式高度链
盒模型和定位干扰常被忽略
即使高度链通了，padding、border、margin 或 position 仍可能让视觉结果错位：
-
box-sizing: content-box（默认）下，height: 100%只管内容区，padding和border会额外加高 → 推荐全局重置为box-sizing: border-box - 块级子盒的上下
margin会外边距合并，脱离父盒，导致父容器实际高度 ≠ 子盒高度之和 -
position: absolute元素设height: 50%时，百分比基于包含块高度，而非视觉父级；若包含块没高，就按视口算 —— 解法是给最近的position: relative祖先加明确高度，或改用top/bottom区间控制
真正卡住的往往不是 height: 100% 本身，而是父元素高度来源不明、盒模型未归一、或布局模式与预期错配。动手前先查 computed height，比反复改样式快十倍。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
