HTML의 `height: 100%`는 백분율 값 및 DOCTYPE의 영향과 어떻게 작동합니까?

HTML의 높이 속성 및 백분율 값

HTML에서는 높이 속성을 백분율 값으로 설정하여 높이를 지정할 수 있습니다. 상위 요소를 기준으로 한 요소입니다. 그러나 이는 상위 요소에 명시적인 높이가 설정된 경우에만 작동합니다. 기본적으로 요소의 암시적 높이는 "auto"입니다. 즉, 높이가 콘텐츠에 따라 자동으로 결정됩니다.

질문의 첫 번째 부분은 div 채우기 방법에 관한 것입니다. DOCTYPE을 제거하지 않은 페이지의 경우 "html" 요소에 대한 높이 선언을 포함하도록 CSS를 수정하여 응답할 수 있습니다.

html { 높이: 100%; }<br>

이 솔루션을 사용하면 DOCTYPE을 제거할 필요가 없으므로 높이 기능을 중단하지 않고 페이지가 표준 모드에서 렌더링됩니다.

Quirks 모드 대 표준 모드

DOCTYPE 제거 효과에 관한 질문의 두 번째 부분에서는 쿼크 모드와 표준 모드의 차이점에 대해 설명합니다.

DOCTYPE이 존재하면 브라우저는 웹 표준을 엄격하게 준수하는 표준 모드로 들어갑니다. 그러나 DOCTYPE을 생략하면 브라우저는 이전 브라우저의 동작을 에뮬레이트하려고 시도하는 특수 모드로 전환됩니다.

표준 모드에서는 높이에 대한 백분율이 항상 계산됩니다. 부모 요소의 높이를 기준으로 합니다. 귀하의 예에서는 본문 요소에 명시적인 높이가 없으므로("auto"로 설정됨) div의 높이 100%가 사실상 "auto"로 계산되어 콘텐츠가 표시되지 않습니다.

반대로 쿼크 모드는 예측하기 어려운 규칙으로 작동합니다. 이 모드에서는 div의 높이가 뷰포트 높이를 기준으로 계산되므로 div가 예상대로 전체 페이지를 채울 수 있습니다.

결론

div의 높이 값을 100%로 설정하면 상위 요소에 명시적인 높이가 정의된 경우에만 표준 모드에서 의도한 대로 작동합니다. html 요소의 높이를 100%로 설정하면 페이지 내 높이의 백분율이 올바르게 계산되도록 할 수 있습니다. DOCTYPE이 제거되면 브라우저는 백분율 계산을 수정하고 부모의 높이가 명시적으로 지정되지 않은 경우에도 div가 페이지를 100% 높이로 채울 수 있도록 하는 특수 모드로 전환됩니다.

위 내용은 HTML의 `height: 100%`는 백분율 값 및 DOCTYPE의 영향과 어떻게 작동합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!