absolute元素百分比高度失效的本质是包含块高度为auto，导致50%×0px=0px；仅设position:relative不解决，因未赋予实际高度；有效方案包括flex:1、vh单位或补全html/body高度链。
absolute元素百分比高度失效，本质是包含块高度为auto
绝对定位元素的 height: 50% 不生效，不是样式写错了，也不是浏览器兼容问题，而是 CSS 规范明确规定的计算逻辑：它的百分比高度必须相对于「最近的非static定位祖先」（即包含块）的高度来算。如果那个祖先的 height 是 auto（比如没设高、仅靠内容撑开），那 50% 就等于 50% × 0px = 0px —— 结果就是看不见或高度塌缩。
为什么给父元素加 position: relative 还是不行
只加 position: relative 并不自动赋予高度；它只是让该元素成为 absolute 元素的包含块，但若它自身高度仍是 auto，百分比依然无基准可依。常见错误场景包括：
-
<div class="parent"><div class="child" style="position: absolute; height: 80%;"></div></div>，而.parent既没设height、min-height，也没用flex/grid撑开 - 父元素是
<main>或<section>这类语义化标签，默认display: block+height: auto，即使html, body { height: 100% }也传不到它身上 - 父元素用了
display: flex但没配flex-direction: column和显式容器高度，子项无法继承可计算高度
真正起效的三种做法（按推荐顺序）
别死磕“给父元素加 height”，优先选更健壮、不易断裂的方式：
- 用
flex: 1替代height: 100%：父容器设display: flex; flex-direction: column;，目标子容器设flex: 1，absolute 子元素再基于它定位 —— 高度由 flex 分配决定，不依赖百分比解析 - 改用视口单位：
height: 40vh或max-height: 60vh，完全绕过父级高度依赖，适合模态框、侧边栏等场景 - 向上补全高度链（仅当必须用百分比时）：
html, body { height: 100%; }→ 父容器加height: 100%或min-height: 100vh→ 绝对定位元素才可能正确解析height: 90%
容易被忽略的细节：伪元素和滚动容器
在 overflow: auto 的容器里，给 ::before 或 ::after 设 height: 100% + position: absolute，常会发现它只贴着容器可视区高度，而不是整个滚动内容高度。这是因为 height: 100% 仍参照的是父容器的 height（固定值），不是 scrollHeight。此时不能靠百分比解决，得换思路：
立即学习“前端免费学习笔记（深入）”；
- 把伪元素换成真实子元素，并用
position: sticky或 JS 监听scrollHeight动态设高 - 放弃绝对定位，用
background-image或border-left模拟竖线类效果，天然随内容延展 - 用
transform: scaleY()配合 JS 计算比例，但需注意重排开销
