Flexbox Aside의 배경색을 넘쳐나는 콘텐츠로 동적으로 확장하는 방법은 무엇입니까?

배경색을 오버플로 영역으로 확장

문제

Flexbox 레이아웃에서 side 요소의 배경색이 전체 높이를 확장하지 않습니다. 콘텐츠 높이가 보이는 영역보다 훨씬 크더라도 상위 컨테이너입니다. 배경색을 콘텐츠 하단까지 동적으로 늘리려면 어떻게 해야 하나요?

제한 사항

• 추가 요소를 추가할 수 없습니다.
• side 요소는 스크롤해야 합니다.
• 배경색은 상단에서 하단까지 확장되어야 합니다. 컨테이너.
• side 요소는 자체 오버플로를 가질 수 없습니다: auto.
• 솔루션은 동적이어야 하며 고정된 높이에 의존하지 않아야 합니다.

분석

파트 I: 배경 색상

CSS 배경 속성은 여백을 포함하지 않고 요소의 테두리까지 확장됩니다. 영역. 이 경우 오버플로 영역은 #body 요소의 테두리 외부에 있으므로 배경색이 잘립니다.

파트 II: 오버플로

오버플로 속성은 배경이 아닌 콘텐츠 표시만 제어합니다. . 넘치는 내용은 배경이 아닌 잘립니다.

해결책

이 문제는 위에서 언급한 제한 사항으로 인해 CSS만으로는 해결할 수 없습니다. JavaScript 솔루션이 필요합니다.

JavaScript는 콘텐츠 크기에 맞게 #body 요소의 높이를 동적으로 조정할 수 있습니다. 이렇게 하면 배경색이 컨테이너 하단까지 확장됩니다.

다음은 예제 코드 조각입니다.

document.getElementById("body").style.height = document.documentElement.scrollHeight + "px";

위 내용은 Flexbox Aside의 배경색을 넘쳐나는 콘텐츠로 동적으로 확장하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!