如何使旁白的背景颜色超出其溢出的父级？

使背景颜色延伸到溢出区域

问题：

在网页布局中， “overflow: auto”容器中“aside”元素的背景颜色不会超出可见区域，从而留下滚动条区域的白色背景。

问题：

我们如何强制“aside”元素的背景颜色动态渲染为父元素的高度内容，即使溢出容器的容量有限高度？

答案：

CSS 实现有限

不幸的是，仅使用 CSS 无法扩展背景颜色到溢出区域。这是因为：

• 背景颜色仅覆盖元素的宽度和高度，而不是边距或溢出区域。
• “溢出”属性仅控制内容，而不控制元素的内容。

JavaScript解决方案

达到想要的效果效果，我们需要使用JavaScript。这是一个片段：

const aside = document.querySelector("aside");
const parent = aside.parentElement;

parent.addEventListener("scroll", () => {
  aside.style.height = `${parent.scrollHeight}px`;
});

说明：

此脚本向监视滚动的父元素添加一个事件侦听器。当滚动发生时，它会更新“aside”元素的高度以匹配可滚动内容的高度，确保背景颜色始终填充整个溢出区域。

注意：

• 此脚本假设父元素具有“overflow: auto”属性。
• “aside”和“parent”分别是“aside”元素及其父元素的CSS选择器。调整它们以匹配您的 HTML。

以上是如何使旁白的背景颜色超出其溢出的父级？的详细内容。更多信息请关注PHP中文网其他相关文章！