根本原因是浏览器无法计算“100%”对应像素值，需html和body显式设height: 100%作为高度源头；父元素若为height: auto、position: absolute、inline类display或float等，均会导致height: 100%失效。
根本原因不是你写错了 CSS，而是浏览器压根算不出“100%”对应多少像素——它需要一个明确的、可继承的高度源头，而这个源头常常在 html 和 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），才说明链路通了
哪些父级 display 类型会让 height: 100% 失效
即使 html 和 body 都设了 height: 100%，若中间某层用了破坏“包含块”关系的样式，height: 100% 仍会回退到初始包含块（通常是视口），结果还是 auto。
-
position: absolute或position: fixed的父元素：它不再作为子元素的包含块，高度继承链中断 -
display: inline、display: inline-block、display: table-cell：这些 display 类型对百分比高度的支持极差，height: 100%基本被忽略 -
float元素：脱离文档流，无法提供有效高度上下文 - Flex 容器里子项写了
align-self: flex-start或min-height: 0：会干掉默认的align-items: stretch拉伸行为，此时再写height: 100%也无效
为什么 100vh 看似简单却更难控
100vh 绕过了百分比链路，直接拿视口高度当基准，所以写上去立刻见效。但它绑定的是“当前视口”，不是“父容器”，在真实场景里容易翻车：
立即学习“前端免费学习笔记（深入）”；
- iOS Safari 地址栏收起/展开时，
vh值会重算，页面突然跳动 - 父容器设了
overflow: auto，子元素用100vh会溢出该容器，脱离滚动上下文 - 页面有
position: fixed头部或底部时，100vh仍按完整屏幕算，可能遮挡内容或留白 - 用户缩放页面（
Ctrl +/Cmd +），vh不随布局缩放，但百分比链路下的height: 100%更稳定
真正稳的替代方案：flex: 1 和 min-height: 0
现代布局中，flex: 1 比 height: 100% 更可靠：它不依赖父级已有高度，而是从 flex-basis: 0 开始拉伸，只认剩余空间。
- 父容器需设
display: flex且有明确主轴方向（如flex-direction: column） - 要撑满的子元素加
flex: 1；若还有其他兄弟元素，它会按剩余空间比例分配 - 若子项内部嵌套非 Flex 元素，或被 UI 库加了
min-height: 0，需显式覆盖为min-height: auto或加align-self: stretch - Grid 容器中同理：不要在子项上硬写
height: 100%，改用align-self: stretch（默认已有）或给容器本身设height（如height: 100vh或height: 500px）
真正卡住的往往不是怎么写 CSS，而是没打开开发者工具，逐层点开父元素看它们的「Computed height」到底是不是你预期的数值——这是最快定位问题的起点。
