为什么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 绕过了百分比链路，直接拿视口高度当基准，所以写上去立刻见效。但它绑定的是“当前视口”，不是“父容器”，在真实场景里容易翻车：

• iOS Safari 地址栏收起/展开时，vh 值会重算，页面突然跳动
• 父容器设了 overflow: auto，子元素用 100vh 会溢出该容器，脱离滚动上下文
• 页面有 position: fixed 头部或底部时，100vh 仍按完整屏幕算，可能遮挡内容或留白
• 用户缩放页面（Ctrl + / Cmd +），vh 不随布局缩放，但百分比链路下的 height: 100% 更稳定

Flex 容器里写 height: 100% 还是不生效？别硬刚，换 flex: 1

Flex 子项默认靠 align-items: stretch 拉伸，但这个行为会被 min-height: 0（常见于 UI 库重置样式）或 align-self: flex-start 干掉。此时再写 height: 100%，等于在无效上下文里叠 buff。

立即学习“前端免费学习笔记（深入）”；

• 优先用 flex: 1：它主动参与主轴/交叉轴的空间分配，不依赖父级有没有“数值高度”
• 若必须保留 height: 100%（比如内部要嵌套非 Flex 元素），则需组合设置：min-height: 0; align-self: stretch;
• Chrome 72+ 起严格按规范处理 min-height，子项有文字时默认 min-height = 内容最小高度，height: 100% 不覆盖它——这是设计，不是 Bug

真正容易被忽略的，是没打开开发者工具逐层点开看

很多人卡在“为什么我明明写了 html, body { height: 100% } 还是不行”，其实问题常出在第三层：比如 main 或 .container 用了 display: inline、float 或 position: absolute，导致它不再是子元素的“包含块”，height: 100% 自动回退到初始包含块（通常是视口），结果又变成 auto。

动手前先打开 DevTools，从目标元素往上点，挨个看每一层的 “Computed → height”。只要有一层是 auto，就停在那里修——不是代码没写对，是那个节点没被正确纳入高度链路。