如何让绝对定位子元素铺满overflow容器的滚动高度？

可以仅用CSS实现，无需修改HTML布局，核心是利用CSS Grid让绝对定位元素的高度跟随内部内容高度，而非容器的固定可见高度。

修改后的CSS代码： #

.a {
  height: 80vh;
  width: 200px;
  overflow-y: auto;
  position: relative;
  display: grid; /* 新增：将容器转为Grid布局 */
}

.b {
  height: 100%;
  position: absolute; 
  top: 0;
  width: 10px;
  background: red;
}

原理说明： #

• 原代码中，.a设置了position: relative和固定高度80vh，绝对定位的.b的height: 100%会相对于.a的固定高度计算，因此只能覆盖容器的可见区域。
• 给.a添加display: grid后，容器内的文本和.b会默认处于同一个网格单元格中，该单元格的高度由内部文本内容的实际高度决定。
• 此时.b的height: 100%会基于网格单元格的高度（即文本内容的总高度）计算，从而延伸至内容底部；同时.a的overflow-y: auto依然生效，滚动时.b会跟随内容同步滚动。

完整演示代码： #

<div class="a">
  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test 
  <div class="b"></div>
</div>

内容的提问来源于stack exchange，提问作者WillD