height: 100% 失效的根本原因是高度链断裂，需确保 html 和 body 同时设 height: 100% 且无 margin/padding；父容器若为 flex、absolute、inline 等特殊显示模式或 min-height: 0，也会中断继承；推荐用 flex: 1 替代 height: 100%，100vh 则存在滚动、缩放、ios 兼容等问题。
height: 100% 无法占满屏幕高度，根本不是 CSS 写错了，而是浏览器压根算不出“100% 等于多少像素”——它需要一个明确的、可继承的高度源头，而这个源头常常在 html 和 body 就断了。
html 和 body 必须同时设 height: 100%
height: 100% 是相对于直接父元素的 computed height 计算的。body 的父元素是 html，而它的默认 height 是 auto。
所以只写 body { height: 100% }，等于让浏览器算 “100% × auto”，结果就是 0px。
- 必须同时设置：
html, body { height: 100%; margin: 0; padding: 0; } - 某些 CSS reset（如 Normalize.css）会悄悄把
html高度重置为auto或0，得手动覆盖 - 开发者工具里点开
body→ “Computed” 面板 → 若height显示auto，说明链路在html这一级就断了
中间某层父容器的 computed height 是 auto
即使 html 和 body 都设了 height: 100%，目标元素仍可能塌缩。常见断点包括：
- 父容器用了
display: inline、display: table-cell、float—— 它们无法作为有效“包含块” - 父容器是
position: absolute且没配top/bottom，脱离文档流后高度坍缩 - 父容器是 Flex 容器，但自身
height仍是auto（比如没设min-height: 100vh或height: 100%） - UI 库（如 Ant Design、Chakra UI）给父容器加了
min-height: 0，会抑制align-items: stretch，间接导致子项height: 100%失效
验证方法：在开发者工具中逐级点击目标元素的所有父级，看每一层的 “Computed” → height 是否为具体数值（如 720px）。只要出现 auto，就是断点。
Flex 容器里硬写 height: 100% 反而禁用拉伸
Flex 子项默认靠 align-items: stretch 撑满交叉轴高度，但这个行为极易被覆盖：
- 一旦子项声明了
height: 100%，浏览器就认为你手动接管高度控制，会主动忽略stretch -
min-height: 0（很多组件库默认加）会卡住拉伸，需显式覆盖为min-height: auto - 更可靠的做法是删掉所有
height: 100%和min-height: 100%，改用：.item { flex: 1; }它等价于flex-grow: 1; flex-shrink: 1; flex-basis: 0，从 0 开始拉伸吃剩余空间
若父容器是 flex-direction: column，且已有固定高头部/底部，中间区域加 flex: 1 即可自动填满。
100vh 看似简单，但滚动和嵌套场景下容易溢出
100vh 绕过了百分比链路，直接取视口高度，所以写上去立刻“见效”。但它绑定的是视口，不是父容器，在真实项目里常翻车：
- 放在
overflow: auto的滚动区域里，100vh会让子元素撑出该容器，脱离滚动上下文 - iOS Safari 地址栏收起/展开时，
vh值重算，页面突然跳动 - 有
position: fixed头部时，100vh仍按全屏算，底部常留白或被遮挡 - 用户缩放页面（Cmd +），
vh不随布局缩放，而百分比链下的height: 100%更稳定
真正需要“占满父容器”的场合（比如 Grid 区域内再套 Flex），100vh 会破坏层级语义，必须回归显式高度链。
最不该忽略的，是没打开开发者工具逐层点开看 computed height —— 绝大多数人卡住，不是因为不会写，而是根本没确认过哪一层是 auto。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
