百分比高度不生效是因为父级computed height为auto，浏览器无法计算具体像素值；必须确保html、body及所有中间父元素均有明确高度（如height: 100%或min-height: 100vh），并用开发者工具逐层验证computed height是否为具体数值，任一层为auto则整条链中断。
百分比高度不生效，不是你写错了 height: 100%，而是浏览器根本没算出“100%”该等于多少像素——它需要一个**有具体数值的父级高度**作为源头，而这个源头常常在 html 和 body 就断了。
为什么 html 和 body 必须同时设 height: 100%
浏览器计算子元素 height: 80% 时，只看**直接父元素的 computed height**。如果父是 height: auto（默认值），那 80% 就无从下手，直接退化为 height: auto。而 html 是 body 的父级，body 是你所有容器的祖先；两者缺一，链路就断。
- 某些 CSS reset（如 Normalize.css）会重置
html或body的height，导致你写了body { height: 100% }却无效 - 移动端框架（Vant、Bootstrap）常悄悄覆盖
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强制触发继承逻辑 - 更稳的替代方案：
top: 60px; bottom: 20px;，完全绕过高度继承链
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%） - UI 框架（Ant Design、Bootstrap）常重置
min-height: 0或align-self: flex-start，干扰height: 100%拉伸；需手动加min-height: 0或align-self: stretch - 嵌套两层以上 Flex 时，塌陷常发生在某一层实际拿到的是
height: 0，导致后续所有flex: 1都失去意义
别死磕 height: 100% 的替代方案
当父链太深、样式不可控，或要兼容滚动/缩放/固定定位时，硬推百分比链路反而容易翻车。更稳的做法是绕过它：
-
height: 100vh：立刻见效，但 iOS Safari 地址栏收起/展开时vh会重算，页面跳动；优先用min-height: 100dvh（Safari 16.4+ 支持） - Flex 布局：
display: flex父容器配flex: 1子项，需确保父容器本身有高度（如min-height: 100vh），并加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: 0。
