如何用:before伪元素填充可滚动父元素？CSS方案咨询

当然可以纯CSS解决这个问题！你遇到的核心问题是：绝对定位的:before伪元素是相对于滚动容器的可视高度（也就是你设置的height:150px）来计算尺寸的，而不是容器内部内容的实际滚动高度。下面给你两种可行的解决方案：

方案1：用背景属性替代伪元素（最简单高效） #

既然你的伪元素只是用来添加半透明背景色，完全可以直接给滚动容器设置背景，并利用background-attachment: local这个关键属性，让背景跟随内容滚动，从而覆盖整个滚动高度：

#example {
  position: relative;
  width: 300px;
  height: 150px;
  overflow-y: auto;
  background-color: rgba(255, 0, 0, 0.5);
  background-attachment: local; /* 让背景跟随内容滚动 */
}

这个方案不需要伪元素，代码更简洁，完美匹配你的需求——不需要硬设高度，背景会自动覆盖所有滚动内容的区域。

方案2：保留伪元素，通过Grid布局调整定位 #

如果你必须使用:before伪元素（比如要添加其他内容而非单纯背景），可以通过Grid布局让伪元素的高度自动匹配内容的滚动高度：

#example {
  position: relative;
  width: 300px;
  height: 150px;
  overflow-y: auto;
  display: grid; /* 改为Grid布局 */
}
#example:before {
  content: " ";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 0, 0, 0.5);
  z-index: -1; /* 确保伪元素在文本下方 */
}
#example > * {
  grid-row: 1/-1;
  grid-column: 1/-1; /* 让文本内容和伪元素重叠在同一网格区域 */
}

Grid布局会自动根据内部内容的高度来计算网格区域的尺寸，伪元素的top:0; bottom:0就会匹配这个内容高度，而不是容器的可视高度。

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