为什么CSS百分比高度100%在父元素无具体高度时无效，如何用vh或固定高度解决？

本文共计1014个文字，预计阅读时间需要5分钟。

height: 100% 设置无效，根本不是 CSS 错误，而是浏览器对根元素的算术不输出100%。这是因为它需要一个明确、可继承的高度源。通常这个源头在 和 body 元素中就结束了。

父元素没高度，子元素的 height: 100% 就是空气

浏览器计算 height: 100% 时，只看**直接父元素的 computed height**。如果父元素是 height: auto（默认值），那子元素的 100% 就无从下手，退化为内容撑开高度——哪怕你写了十层嵌套，只要中间某一层没设高，后面全白搭。

• html 是 body 的父元素，body 是你所有容器的祖先；两者都必须显式设 height: 100%，缺一不可
• 某些 CSS reset 或框架（如 Normalize.css）会重置 html 或 body 的 height，导致你写了 body { height: 100% } 却依然失效
• 用开发者工具选中目标元素 → 切到 “Computed” 面板 → 查看 height 值：如果是 auto，说明包含块没生效；如果是具体像素（比如 720px），才说明链路通了

100vh 看似简单，但和滚动、缩放、固定定位一碰就出事

100vh 绕过了百分比链路，直接拿视口高度当基准，所以写上去立刻见效。