콘텐츠 영역을 채우기 위해 배경색을 동적으로 확장하는 방법은 무엇입니까?

콘텐츠 영역을 배경색으로 동적으로 채우도록 옆 요소 강제

HTML에서 공통 레이아웃에는 기본 콘텐츠 영역 옆에 옆 요소가 포함됩니다. 스크롤 오버플로 내에서. 그러나 side 요소의 배경색은 일반적으로 보이는 영역에서 잘려서 접힌 부분 아래에 빈 공간이 남습니다. 이 문서에서는 전체 콘텐츠 높이와 일치하도록 옆 배경 색상을 동적으로 확장하는 문제를 다룹니다.

문제 설명

다음 HTML 구조를 고려하세요.

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

#body 요소에는 오버플로가 자동으로 설정되어 주요 콘텐츠를 스크롤할 수 있습니다. 렌더링된 높이가 가시 영역으로 제한되어 있더라도 side 요소의 배경색은 전체 콘텐츠의 위에서 아래로 수직으로 늘어나야 합니다.

제한 사항

• 추가 요소를 추가할 수 없습니다.
• side 요소는 기본 콘텐츠와 함께 스크롤되어야 합니다.
• 배경색이 스크롤 없이 볼 수 있는 전체 콘텐츠 높이까지 확장되어야 합니다.
• side 요소는 오버플로를 자동으로 설정할 수 없습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!