百分比高度不生效是因为缺少从html到目标元素的完整高度链；任一父级computed height为auto、使用inline/float/absolute、flex容器未设高度或子项误写height:100%均会导致失效。
百分比高度（height: 100%、height: 80%等）在子元素中不生效，不是你漏写了样式，而是浏览器根本没算出“100%”对应多少像素——它需要一条从 html 开始、逐层贯通的明确高度链，中间断一环，整条链就归零。
查 computed height 是 auto？立刻往上翻父级
打开开发者工具 → 选中目标元素 → 切到「Computed」面板 → 看 height 行：如果是 auto，说明包含块没提供有效高度基准。必须逐层点开：目标元素 → 父容器 → 祖父容器 → body → html，任一层是 auto，链路即断。
-
html或body被 Normalize.css、Ant Design 等框架重置了height，导致你写了body { height: 100% }却无效 - 某层用了
display: inline、float或position: absolute，它就不再是“包含块”，无法作为高度参照 - Flex 容器默认
height: auto，哪怕写了display: flex，也不等于有高度上下文
Flex 容器里写 height: 100% 反而禁用拉伸
在 display: 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 时，中间容器需加
min-height: 0，否则默认min-height: auto会阻止内部flex: 1生效 - 别同时写
align-self: stretch和height: 100%——前者是默认行为，后者冗余且在 Safari 14–15.6 中可能触发兼容问题
100vh 看似快，但移动端和滚动场景下容易翻车
height: 100vh 绕过了百分比链路，直接绑定视口高度，所以一写就见效。但它把“填满父容器”偷换成了“填满视口”，真实项目中常出问题：
- iOS Safari 地址栏收起/展开时，
vh值会重算，页面突然跳动 - 放在
overflow: auto的滚动区域里，100vh会让子元素溢出该区域，而不是填满它 - 有
position: fixed头部时，100vh仍按全屏算，底部常留白或被遮挡 - 用户缩放页面（
Cmd/Ctrl +），vh不随布局缩放，而百分比链路下的height: 100%更稳定 - 真要用
vh，优先选max-height: 80vh+overflow: auto，比死锁height更可控
真正容易被忽略的，是没打开开发者工具逐层点开看 —— 你以为链路通了，其实 html 或某层 .wrapper 的 computed height 仍是 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
