如何讓旁白的背景顏色超越其溢出的父級？

讓背景顏色延伸到溢位區域

問題：

在網頁版面中， 「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中文網其他相關文章！