height: 100% 失效是因为高度继承链断裂，需 html 和 body 同时设 height: 100%，并排查中间父容器是否因 display、float、position 或 flex 属性导致 computed height 为 auto；100vh 虽可绕过但存在视口变化、溢出、缩放等兼容问题。
height: 100% 不起作用，不是你写错了，而是浏览器根本算不出“100%”对应多少像素——它需要一个从 html 开始、逐层向下传递的明确高度值。中间断一环，后面全白搭。
为什么只设 body { height: 100% } 不行
因为 body 的父元素是 html，而它的默认 height 是 auto。body 的 100% 没有参照物，只能退化为内容撑开高度（通常是 0）。开发者工具里点开 body 的 “Computed” 面板，如果看到 height: auto，就说明链路在 html 这一级就断了。
-
html和body必须同时设置height: 100%，缺一不可 - 某些 CSS reset（如 Normalize.css）会悄悄把
html的height重置为auto或0，得手动覆盖 - 顺手加上
margin: 0; padding: 0;，避免默认边距干扰视口填充
检查中间父容器是否意外“断链”
即使 html 和 body 都设了 height: 100%，目标元素仍可能失效——问题常出在第三层或第四层父容器上。
- 用开发者工具逐层点开目标元素的每个父级，看 “Computed” →
height是否为具体像素值；只要出现auto，就是断点 - 常见断链原因：
display: inline、display: table-cell、float: left、position: absolute——这些会让该元素脱离正常文档流，不再作为子元素的“包含块” - Flex 容器中，
min-height: 0（很多 UI 库默认加）会阻止align-items: stretch生效，此时height: 100%也无效，需显式覆盖为min-height: auto或删掉
100vh 能绕过链路，但代价是什么
100vh 看似简单粗暴，但它不走百分比继承链，而是直接读取当前视口高度。这在嵌套、滚动、缩放或固定定位场景下极易翻车。
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 地址栏收起/展开时，
vh值会重算，页面视觉跳动 - 若目标元素在
overflow: auto的容器内，100vh会让它溢出该容器，脱离滚动上下文 - 页面有
position: fixed头部时，100vh仍按完整屏幕计算，常导致底部留白或遮挡内容 - 用户缩放页面（Ctrl + / Cmd +），
vh不随布局缩放，而百分比链下的height: 100%更稳定
真正该盯住的，是开发者工具里的 “Computed height”
别猜、别试、别堆 hack。打开浏览器开发者工具，选中目标元素 → 切到 “Computed” 面板 → 拉到最底下找 height 值。如果是 auto，说明某层父容器没传下高度；如果是具体像素（比如 720px），才说明链路通了。这个动作比改十遍 CSS 都管用——绝大多数人卡住，不是因为不会写，而是根本没确认过那一层层的 computed 值到底对不对。
