百分比高度失效源于高度链断裂，需html至目标元素逐层有明确高度；flex容器中height:100%会禁用align-items:stretch；100vh在移动端易出问题，推荐flex:1或max-height+overflow控制。
百分比高度（height: 100%、height: 80%等）失效，不是你漏写了样式，而是浏览器压根没算出“100%”对应多少像素——它需要一个从 html 开始、逐层贯通的明确高度链，中间断一环，整条链就归零。
为什么 computed height 是 auto 就等于失效
浏览器只看直接父元素的 computed height 值。如果显示 auto，说明该父元素没有可继承的高度基准，子元素的 height: 100% 就退化为 0px 或内容撑开高度。
- 打开开发者工具 → 选中目标元素 → 切到「Computed」面板 → 查
height行：是auto？那就立刻往上查父级 - 必须逐层点开：目标元素 → 父容器 → 祖父容器 →
body→html，任一层是auto，链路即断 - 常见断点：
html或body被 Normalize.css 或 UI 框架重置了height；某层用了display: inline、float或position: absolute，导致它不再是“包含块”
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, body { height: 100% } 还是不行”，其实问题常出在第三层或第四层：比如某个 .container 被 position: relative 和 top: 10px 干扰了包含块判定，或者某个 div 被框架自动加了 min-height: 0，破坏了 Flex 拉伸逻辑。不点开「Computed」面板确认每一层的 height 是否为具体像素值，光靠猜或重写样式，只会反复踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
