如何让可滚动父级div的绝对定位子元素.b高度占满父级

问题核心：当父容器.wrap设置了overflow-y: auto（无论是否有max-height），用position: absolute+height:100%的.b元素只会覆盖容器的可视高度，滚动后无法覆盖超出部分。

纯CSS解决方案（推荐） #

使用CSS Grid布局让.b和内容容器.a重叠，这样.b会自动匹配.wrap的实际内容高度，无论容器是否滚动：

.wrap {
  white-space: pre-wrap;
  position: relative;
  height: auto; /* 实际场景高度为auto，可按需添加max-height */
  max-height: 200px; /* 用于复现滚动场景 */
  background: red;
  overflow-y: auto;
  display: grid; /* 启用Grid布局 */
}

.a, .b {
  grid-area: 1 / 1; /* 让两个元素处于同一个网格区域，实现重叠 */
}

.b {
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
}

对应的HTML结构保持不变：

<div class="wrap">
  <div class="a">
    Origin:
    The phrase "Lorem ipsum dolor sit amet" is derived from a jumbled Latin version of a passage from Cicero's "De Finibus Bonorum et Malorum" (On the Extremes of Good and Evil), a treatise on the theory of ethics.
    Purpose:
    It's used as a placeholder to fill space and demonstrate the visual elements of a design, such as font, spacing, and layout, without the reader being distracted by actual content.
    Common Use:
    It's widely used in graphic design, web development, and publishing to show how text will look in a design before the actual text is written.
    Why it's used:
    The letters and letter spacing in the combinations reveal, at their best, the weight, design, and other important features of the typeface.
    Example:
    A common form of Lorem ipsum reads: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
  </div>
  <div class="b"></div>
</div>

原理说明 #

Grid布局的grid-area:1/1会让.a和.b共享同一个网格单元格，此时.b的高度会自动拉伸至与单元格高度一致——也就是.wrap的实际内容高度（包括滚动区域），完美解决滚动时无法覆盖全部内容的问题。

如果场景无法使用Grid布局，也可以通过JavaScript动态设置.b的高度：

const wrap = document.querySelector('.wrap');
const b = document.querySelector('.b');
b.style.height = wrap.scrollHeight + 'px';

// 若内容动态变化，需监听内容更新后重新设置高度

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