IE에서 Div가 컨테이너 높이로 늘어나지 않는 이유는 무엇입니까?

Divs의 높이 계산: Firefox와 IE 호환성

컨테이너 내에 두 개의 div가 중첩된 웹 페이지에서 예상되는 사항은 다음과 같습니다. 두 내부 div 모두 컨테이너의 너비와 높이를 완전히 차지합니다. 그러나 Internet Explorer(IE)에서는 내부 div가 포함된 텍스트 높이까지만 확장되는 것으로 관찰되었습니다. 반면 Firefox에서는 전체 컨테이너 높이까지 확장됩니다.

제공된 스타일시트 세트 내부 div, #mainContentsWrapper 및 #sidebarWrapper 모두 높이를 100%로 설정합니다. 이는 Firefox에서는 의도한 대로 작동하지만 IE에서는 작동하지 않습니다. 이러한 불일치의 이유는 CSS 사양의 높이 백분율 정의에 있습니다.

높이 측정의 백분율은 뷰포트가 아닌 "포함 블록"의 높이에 따라 달라집니다. 주어진 시나리오에서 #container는 내부 div의 포함 블록 역할을 합니다. #container의 높이는 "auto"로 설정되어 있으므로 콘텐츠 높이에 따라 달라집니다. 결과적으로 내부 div의 높이 백분율이 "자동"으로 계산되어 IE에서 예상치 못한 동작이 발생합니다.

이 문제를 해결하려면 #container의 높이를 명시적으로 정의해야 합니다. 또한 div가 뷰포트의 전체 높이까지 늘어나도록 하려면 및 요소도 지정해야 합니다.

이러한 조정을 통해 코드는 Firefox와 IE 모두에서 예상대로 작동해야 합니다.

<code class="CSS">html, body { height:100%; }
#container { height:100%; }</code>

위 내용은 IE에서 Div가 컨테이너 높이로 늘어나지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!