Firefox와 Internet Explorer에서 Div 높이가 다르게 렌더링되는 이유는 무엇입니까?

IE Div 높이 렌더링 이상

웹 개발에서는 브라우저 간 호환성 문제가 흔히 발생합니다. 그러한 문제 중 하나는 Firefox와 Internet Explorer 간의 div 높이 렌더링 불일치입니다.

문제:

이 경우 컨테이너 div에는 두 개의 하위 div가 있습니다. 이상적으로는 컨테이너 내에서 너비와 높이의 100%를 차지합니다. Firefox에서는 예상대로 작동합니다. 그러나 IE에서는 div가 콘텐츠 높이까지만 확장되고 그 위에 빈 공간이 남습니다.

근본 원인:

주요 차이점은 비율에 있습니다. 기반 높이가 계산됩니다. Firefox에서 백분율은 뷰포트 높이를 기준으로 합니다. 그러나 IE에서는 컨테이너 div(이 경우 컨테이너 div)의 높이를 기준으로 합니다.

해결책:

이 문제를 해결하려면 다음을 수행하세요. 컨테이너 div의 높이를 명시적으로 지정하는 데 필요합니다. 또한 포함 블록은 상위 요소가 될 수 있으므로 및 요소도 100%로 설정합니다. 이렇게 하면 컨테이너 div의 높이를 올바르게 계산할 수 있습니다.

아래 수정된 CSS 코드에서 100%로 설정되고 및 또한 지정됩니다:

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

위 내용은 Firefox와 Internet Explorer에서 Div 높이가 다르게 렌더링되는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!