컨테이너 Div에서 100% 높이를 사용할 때 내부 Div가 IE에서 전체 높이에 도달하지 못하는 이유는 무엇입니까?

Firefox 및 IE에서 Div 위치 지정 시 CSS 높이 문제

이 시나리오의 목표는 두 개의 내부 요소를 캡슐화하는 컨테이너 div를 생성하는 것입니다. div는 너비와 높이가 모두 100%입니다. 이는 Firefox에서 의도한 대로 작동하지만 IE는 내부 div가 컨테이너의 전체 높이에 도달하지 못하고 포함된 텍스트 높이에 남아 있는 특이한 동작을 나타냅니다.

이러한 불일치는 다음 개념에서 비롯됩니다. CSS 계산의 "포함 블록"입니다. 백분율은 뷰포트를 기준으로 계산되지 않고 "포함 블록"(이 경우 #container div)의 높이를 기준으로 계산됩니다.

제공된 CSS에서 #container에는 명시적인 높이 사양이 부족합니다. 기본적으로 "자동"입니다. 즉, 내부 내용에 따라 높이가 결정됩니다. 이후 내부 div의 100% 높이 속성은 텍스트 콘텐츠에 따라 달라지는 자동 높이를 기준으로 합니다.

이 문제를 해결하려면 다음 조정이 필요합니다.

1. 컨테이닝 블록을 설정하기 위해 #container에 대한 명시적인 높이 값을 선언합니다.

   <code class="css">#container {
     height: 100%;
   }</code>

   로그인 후 복사

2. 초기 컨테이닝 블록이 브라우저이므로 html과 본문 모두에 높이를 설정합니다. 종속:

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

   로그인 후 복사

이러한 수정을 통해 내부 div가 #container의 전체 높이와 뷰포트의 100%에 걸쳐 표시되도록 하여 IE에서 관찰되는 높이 문제를 해결합니다.

위 내용은 컨테이너 Div에서 100% 높이를 사용할 때 내부 Div가 IE에서 전체 높이에 도달하지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!