如何動態擴展背景顏色來填滿內容區域？

強制Aside 元素以背景顏色動態填充內容區域

在HTML 中，常見佈局涉及主滾動內容區域旁的旁白元素在滾動內容區域旁的旁白元素在滾動內容區域溢出內。然而，aside 元素的背景顏色通常會在可見區域被截斷，在折疊下方留下空白區域。本文解決了動態擴展旁白背景顏色以匹配總內容高度的挑戰。

問題陳述

考慮以下 HTML 結構：

<div id="body">
  <main>...</main>
  <aside>...</aside>
</div>

#body 元素的溢位設定為自動，因此可以捲動主要內容。 side 元素的背景顏色應該從整個內容的頂部到底部垂直延伸，即使渲染的高度僅限於可見區域。

限制

• 不能再加入其他元素。
• aside 元素必須與主要內容一起捲動。
• 它的背景顏色必須延伸到折疊下方的完整內容高度。
• aside 元素不能將其溢位設定為 auto。

JavaScript 解決方案

不幸的是，這不能只透過 CSS 實現。溢出屬性影響內容，而不影響背景。因此，JavaScript 解決方案是必要的。一種方法涉及：

1. 建立一個函數來設定側邊高度：

function setAsideHeight() {
  const bodyHeight = document.getElementById("body").offsetHeight;
  const aside = document.querySelector("aside");
  aside.style.height = bodyHeight + "px";
}

2. 在視窗載入和調整大小時呼叫該函數：

window.addEventListener("load", setAsideHeight);
window.addEventListener("resize", setAsideHeight);

此腳本動態調整側邊高度以匹配總內容高度，確保其背景顏色延伸到滾動區域的底部。

以上是如何動態擴展背景顏色來填滿內容區域？的詳細內容。更多資訊請關注PHP中文網其他相關文章！