在Web布局开发中，我们经常会把一个容器设为overflow滚动，并在其中放置绝对定位的子元素。当尝试用height:百分比来控制该子元素高度时，往往会发现浏览器并没有按预期渲染，甚至元素直接塌陷为零高度。理解这一现象背后的计算规则，是写出稳定布局的前提。
绝对定位元素的包含块
绝对定位元素的位置和尺寸是相对于其包含块计算的。包含块通常是最近的非static定位祖先。如果父容器设置了position:relative并且自身可滚动，那么绝对定位子元素就会以这个滚动容器为基准。
百分比高度的基本规则
根据CSS规范，若一个元素的高度使用百分比，则其包含块必须有一个确定的高度。所谓确定，可以是固定像素值，也可以是通过flex等机制推导出的计算高度。如果包含块高度依赖内容（如普通文档流自动撑开），百分比高度通常无法解析。
滚动容器带来的问题
很多滚动容器写成如下形式：
<div class="scroll-box" style="position:relative; overflow-y:auto; height:300px;">
<div class="abs-item" style="position:absolute; top:0; left:0; height:50%;">
内容
</div>
<div style="height:600px;">撑开滚动</div>
</div>
上面代码中，.scroll-box有明确的300px高度，因此.abs-item的50%可以正常计算为150px。但如果.scroll-box没有显式高度，而是靠内部600px内容撑开，那么.abs-item的height:50%就会因为包含块高度不确定而失效。
滚动内容高度与视口高度的区别
需要区分容器的clientHeight（可见区域）和scrollHeight（完整内容高度）。绝对定位元素若想占满可见区域，应基于clientHeight计算；若想占满全部滚动内容，则需基于scrollHeight。
实践方案
方案一：确保容器有确定高度
最简单的方式是给滚动容器一个固定高度或基于视口的高度，例如：
.scroll-box {
position: relative;
overflow-y: auto;
height: 100vh; /* 或具体像素 */
}
方案二：使用JavaScript动态计算
当容器高度由内容决定且仍需百分比效果时，可用JS读取scrollHeight并赋值：
const box = document.querySelector('.scroll-box');
const item = document.querySelector('.abs-item');
// 基于完整滚动内容高度计算
item.style.height = (box.scrollHeight * 0.5) + 'px';
方案三：改用Flex布局避免绝对定位
如果业务允许，使用flex更能适应动态高度：
<div class="wrap" style="display:flex; flex-direction:column; height:300px;"> <div style="flex:0 0 50%; overflow:auto;">上半区可滚动</div> <div style="flex:1; overflow:auto;">下半区</div> </div>
小结
绝对定位元素在滚动容器中高度百分比失效，核心原因在于包含块高度是否确定。开发时应先确认容器高度来源，再选择固定高度、脚本计算或布局替换等策略，才能保证界面在不同内容长度下都表现一致。