百分比高度失效是因为父级链中存在height: auto元素，导致浏览器无法计算具体像素值；必须从html、body起逐层设置明确高度（如height: 100%或100vh），并用开发者工具逐层验证computed height是否为具体数值，任一层为auto则整条链中断。
百分比高度在子元素上失效，不是你漏写了 height: 100%，而是浏览器压根没算出“100%”该等于多少像素——它需要一个**有具体数值的父级高度**作为源头，而这个源头常常在 html 和 body 就断了。
为什么 html 和 body 必须同时设 height: 100%
浏览器只看直接父元素的 computed height。如果父是 height: auto（默认值），子元素的 height: 80% 就无从计算，直接退化为 height: auto。而 html 是 body 的父级，body 是你所有容器的祖先；两者缺一，整条链就断。
- 某些 CSS reset（如 Normalize.css）会重置
html或body的height，导致你写了body { height: 100% }却无效 - 移动端框架（Vant、Bootstrap）或 UI 库（Ant Design）常悄悄覆盖
html高度，必须用开发者工具确认 Computed →height是否为具体像素（比如720px），而不是auto - 光写
html, body { height: 100% }不够——如果目标元素嵌套在.page → .main → .content里，中间任意一层是height: auto，后面全白搭
position: absolute 元素的 height: 100% 总按视口算
绝对定位元素不认 DOM 父子关系，只找最近的非 static 定位祖先（relative/absolute/fixed）。如果整条链上一个都没有，就 fallback 到视口——height: 50% 就等于 50vh，和父容器高度完全无关。
- 光加
position: relative不够，它只是“入场券”，还得有可计算高度，比如height: 400px或min-height: 100vh - 父容器用了
float、display: inline或transform，它就丧失了作为包含块的资格 - Safari 14–15.6 有个特殊坑：即使父级是
position: relative且height: 100vh，子元素height: 100%也可能被忽略；可加min-height: 0强制触发继承逻辑
Flex 容器里 height: 100% 失效的兼容性陷阱
Flex 容器自身若为 height: auto，子元素的 height: 100% 就等于 100% × 0px = 0px。这不是 Bug，是规范行为。Chrome/Firefox 要求父容器有显式 height（如 100vh）才支持；Safari 14–15.6 更绝——它压根不把 display: flex 父容器当有效参照物，min-height 或 flex: 1 推导出的高度都不行。
立即学习“前端免费学习笔记（深入）”；
- 垂直主轴（
flex-direction: column）下，height: 60%基本无效；应改用flex: 0 0 60%（即flex-basis: 60%） - Flex 子项一旦声明
height: 100%，浏览器就认为你手动接管高度控制，会忽略默认的align-items: stretch行为 - 嵌套 Flex 时，子 Flex 容器需加
min-height: 0，否则默认min-height: auto会阻止内部flex: 1生效
真正该打开开发者工具逐层检查的那几层
很多人卡在“为什么我明明写了 html, body { height: 100% } 还是不行”，其实问题常出在第三层或第四层，比如某个 .container 被 position: relative 和 top: 10px 干扰了包含块判定，或者某个 div 被框架自动加了 min-height: 0 导致拉伸中断。
- 打开浏览器开发者工具，选中目标子元素 → 切到 “Computed” 面板 → 查看
height值：如果是auto，说明链路断了；如果是具体像素（如428px）或100vh，才说明父级有高 - 必须逐层往上点：子 → 父 → 祖父 →
body→html，中间任何一层是auto，整条百分比链就失效 - 特别注意：UI 框架（如 Bootstrap、Ant Design）内部可能重置了
min-height: 0或align-self: flex-start，在 Flex 容器中会干扰height: 100%的拉伸行为
