내 CSS 백분율 높이가 작동하지 않는 이유는 무엇입니까?

CSS 높이 백분율이 작동하지 않음

요소의 높이를 백분율로 지정하려고 하면 예상대로 표시되지 않을 수 있습니다. 이는 백분율 높이가 상위 요소를 기준으로 하기 때문입니다. 따라서 모든 상위 요소의 높이를 100%로 설정하는 것이 중요합니다.

제공된 코드 조각에서:

<div>

문제는 상위 요소, 즉 body 및 html 요소. 이 선언이 없으면 div의 백분율 높이가 일반적으로 설정되지 않는 부모의 기본 높이를 기준으로 해석됩니다.

이 문제를 해결하려면 본문과 html 요소의 높이를 모두 100%로 명시적으로 설정하세요. , 전체 뷰포트를 차지하도록 보장:

html, body { height: 100%; width: 100%; margin: 0; }

html 및 body 요소를 100% 높이로 설정하면 div 요소가 이제 해당 요소를 올바르게 계산할 수 있습니다. 높이는 부모의 높이를 기준으로 하며 이제 뷰포트의 100%입니다. 결과적으로 div는 브라우저 창의 전체 높이에 걸쳐 있는 높이로 올바르게 표시됩니다.

위 내용은 내 CSS 백분율 높이가 작동하지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!