height: 100%失效是因为父元素computed height为auto，导致浏览器计算得0px；必须确保html、body及所有中间父级的computed height均为具体像素值，任一层为auto则整条链中断，推荐用flex: 1替代。
height: 100% 失效不是你写错了，是浏览器根本算不出“100% 等于多少像素”——它需要一个明确的、可继承的高度源头，而这个源头常常在 html 和 body 就断了。
为什么父元素 height: auto 时 height: 100% 直接变成 0px
浏览器计算 height: 100% 时，只看**直接父元素的 computed height**。如果父元素是 height: auto（块级默认值），那子元素的 100% × auto 就等于 0px，结果就是视觉上塌缩或消失，而不是“没反应”。
- 常见现象：
.content写了height: 100%，但只显示一行文字高；开发者工具里Computed → height显示auto而非具体数值 -
min-height: 500px不等于height: 500px：父元素只有min-height没有height，子元素height: 100%依然无效 - 某些 CSS reset（如 Normalize.css）会悄悄把
html的height重置为auto或0，导致你写了body { height: 100% }却白搭
怎么快速定位哪一层高度链断了
别猜，直接打开浏览器 DevTools，选中目标元素，切到「Computed」面板，拉到底部看 height 值：
- 如果是
auto，说明包含块没传下高度，往上逐层点开父节点继续查 - 如果是具体像素（如
720px）或视口单位（如100vh），才说明这一层有基准可依 - 常见断点位置：
html或body没设height: 100%；中间某层用了display: inline、display: table-cell、float或position: absolute，导致它无法作为有效包含块
Flex 容器里写 height: 100% 为什么还是不生效
Flex 容器本身默认 height: auto，它只负责排列，不自动提供高度上下文。哪怕你看到它“撑开了”，只要 Computed → height 是 auto，子项的 height: 100% 就无从计算。
- 不要同时写
height: 100%和flex: 1：语义冲突，浏览器可能忽略其中一个；优先用flex: 1（等价于flex: 1 1 0），它从 0 开始拉伸吃剩余空间 - UI 框架常给子项加
min-height: 0，这会卡住align-items: stretch行为，需显式覆盖为min-height: auto - 父容器是
flex-direction: column且有固定高 header/footer 时，中间区域加flex: 1即可自动填满，不用碰height
100vh 看似简单，但实际场景容易翻车
height: 100vh 绕过了百分比链路，直接绑定视口高度，所以写上去立刻“见效”。但它不认父容器，只认屏幕，真实项目里常出问题：
- iOS Safari 地址栏收起/展开时，
vh值重算，页面突然跳动 - 放在
overflow: auto的滚动区域里，100vh会让子元素撑出该容器，脱离滚动上下文 - 有
position: fixed头部时，100vh仍按全屏算，底部常留白或被遮挡 - 用户缩放页面（Cmd + / Ctrl +），
vh不随布局缩放，而百分比链下的height: 100%更稳定
真正容易被忽略的，是没打开开发者工具逐层点开看 —— 很多人卡在“为什么我明明写了 html, body { height: 100% } 还是不行”，其实问题常出在第三层或第四层，比如某个 .container 被 position: relative 和 top: 10px 干扰了包含块判定，或者被框架自动加了 min-height: 0。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
