Firefox 및 IE에서 내 DIV 높이가 100%가 아닌 이유는 무엇입니까?

Firefox와 IE 간의 Div 100% 높이 호환성 문제

이 시나리오에서는 Firefox와 IE 간의 DIV 요소 렌더링에 차이가 발생했습니다. 특히 포함된 DIV 내에서 높이를 100%로 설정해도 IE에서는 중첩된 DIV가 전체 높이로 확장되지 않습니다.

쿼크 모드와 표준 모드 동작에서 불일치가 발생합니다.

• Quirks 모드(Firefox가 기본 설정)에서 높이는 뷰포트를 기준으로 계산됩니다.
• 표준 모드(권장 설정)에서 높이는 포함 블록의 높이에 따라 달라집니다.

코드에서 포함 블록(#container)의 높이가 'auto'로 설정되어 있으며 표준 모드에서는 정의되지 않은 높이가 생성됩니다. 결과적으로 중첩된 DIV의 높이도 정의되지 않습니다.

이 문제를 해결하고 브라우저 간 일관성을 보장하려면 포함 블록과 해당 상위 항목의 높이를 루트(HTML 및 본문)까지 명시적으로 정의해야 합니다. 요소):

html, body { height: 100%; }
#container { height: 100%; }

이러한 요소의 높이를 설정하면 잘 정의된 포함 블록을 설정하여 중첩된 DIV가 해당 높이를 상속하고 모든 브라우저의 컨테이너 내에서 100%까지 확장할 수 있습니다.

위 내용은 Firefox 및 IE에서 내 DIV 높이가 100%가 아닌 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!