如何使带overflow:scroll属性父元素的::before高度铺满滚动内容？

问题核心在于：设置了overflow:scroll的固定高度容器，其height:100%指向自身可视高度，而非内部滚动内容的总高度。绝对定位的伪元素以该容器为定位上下文时，高度会被限制在可视区域内，无法覆盖超出的滚动内容。

推荐采用内部包裹层的纯CSS方案，无需额外JS或不合理的高度设置：

修改后的代码 #

HTML

<div class="scrollable">
  <div class="content">
    hello<br/>
    hello<br/>
    hello<br/>
    hello<br/>
    hello<br/>
    hello<br/>
    hello<br/>
    hello<br/>
  </div>
</div>

CSS

.scrollable {
  border: 1px solid black;
  height: 100px;
  width: 100px;
  overflow-y: scroll;
}

.content {
  position: relative;
}

.content::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: -1; /* 将伪元素置于内容下方，避免遮挡文本 */
}

原理说明 #

1. 将定位上下文从滚动容器转移到内部的.content层，该层高度由内容自动撑开，完全匹配滚动内容的总高度。
2. 伪元素以.content为定位基准，height:100%会覆盖整个滚动内容区域，滚动时随内容同步移动，实现全区域背景覆盖。
3. z-index:-1确保伪元素不会遮挡上层文本内容。

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