如何动态扩展背景颜色来填充内容区域？

强制 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中文网其他相关文章！