비어 있는 경우에도 DIV가 전체 페이지 높이를 채우도록 만드는 방법은 무엇입니까?

내용 없이도 DIV 블록이 페이지를 수직으로 채우도록 강제하는 방법

특정 상황에서는 필요한 시나리오가 발생할 수 있습니다. 내용에 관계없이 페이지 하단까지 확장되는 DIV 블록입니다. 이를 달성하는 방법은 다음과 같습니다.

문제:

DIV 블록에 콘텐츠가 없으면 일반적으로 축소되어 테두리에 필요한 수직 공간만 차지하며 심. 결과적으로 페이지 하단까지 확장되지 않고 빈 공간이 남을 수 있습니다.

해결책:

DIV 블록이 페이지를 수직으로 채우도록 강제하려면 , 다음 주소를 지정하세요.

1. 컨테이너 요소의 높이: 컨테이너 요소가 컨테이너 요소를 둘러싸는 경우 본문 또는 상위 div와 같은 DIV 블록에는 높이가 100%로 설정되어 있지 않으며, 그 안에 있는 DIV 블록은 컨테이너 높이를 넘어 확장될 수 없습니다. 따라서 높이를 100%로 설정합니다. HTML 및 본문 요소 모두에 대한 속성:

html, body {
  height: 100%;
}

2. 여백 및 패딩: DIV 블록 또는 그 블록에 추가된 여백이나 패딩이 없는지 확인하세요. 완전히 확장되는 것을 방해하는 컨테이너입니다.

이 단계를 따르면 이제 DIV 블록이 확장됩니다. 내용이 없더라도 페이지 하단으로 이동하세요. 그러나 브라우저 호환성 및 Quirks 모드가 최종 결과에 영향을 미칠 수 있으므로 추가 조정은 quirksmode.org와 같은 리소스를 참조하세요.

위 내용은 비어 있는 경우에도 DIV가 전체 페이지 높이를 채우도록 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!