百分比高度失效是因为父元素未提供明确高度源头，需确保html和body均设height:100%，并用开发者工具逐层检查computed height是否为具体像素值。
百分比高度（height: 100%、height: 80%等）失效，不是你写错了，而是浏览器根本算不出“100%”对应多少像素——它需要一个明确的、可继承的高度源头，而这个源头常常在 html 和 body 就断了。
为什么 height: 100% 在父元素上写了却没用
浏览器只看**直接父元素的计算后高度（computed height）**。如果父元素是 height: auto（默认值），子元素的 height: 100% 就无从下手，退化为内容撑开，哪怕你写了十层嵌套，只要中间某一层没设高，后面全白搭。
-
html是body的父元素，body是你所有容器的祖先；两者都必须显式设height: 100%，缺一不可 - 某些 CSS reset（如 Normalize.css）会重置
html或body的height，导致你写了body { height: 100% }却依然失效 - 用开发者工具选中目标元素 → 切到 “Computed” 面板 → 查看
height值：如果是auto，说明包含块没生效；如果是具体像素（比如720px），才说明链路通了
如何快速验证并修复父级高度链路
别猜，直接打开浏览器开发者工具，逐层点开目标元素的父节点，在 “Computed” 面板里检查每一层的 height 是否为具体数值。常见断点位置：
-
html或body没加height: 100%，或被其他样式覆盖 - 中间某层用了
display: inline、float或position: absolute，导致它不再是子元素的“包含块”，height: 100%自动回退到初始包含块（通常是html） - UI 框架（如 Bootstrap、Ant Design）内部重置了
min-height: 0或align-self: flex-start，在 Flex 容器中会干扰height: 100%的拉伸行为
不用死磕 height: 100% 的替代方案
当父链太深、样式不可控，或要兼容滚动/缩放/固定定位时，硬推百分比链路反而容易翻车。更稳的做法是绕过它：
立即学习“前端免费学习笔记（深入）”；
- 用
height: 100vh：直接绑定视口高度，立刻见效；但注意 iOS Safari 地址栏收起/展开时vh会重算，页面可能跳动 - 用 Flex 布局：父容器设
display: flex; flex-direction: column;，子项用flex: 1替代height: 100%；需额外加min-height: 0防止 UI 库重置破坏拉伸 - 用
max-height: 30vh+overflow: auto：比height: 30%更可靠，尤其用于可滚动区域；删掉无效的height: X%，只留max-height
真正容易被忽略的，是没打开开发者工具逐层点开看——很多人卡在“为什么我明明写了 html, body { height: 100% } 还是不行”，其实问题常出在第三层或第四层，比如某个 .container 被 position: relative 和 top: 10px 干扰了包含块判定，或者某个 div 被框架自动加了 min-height: unset。
