DOCTYPE이 제거될 때 100% 높이 div가 페이지를 채우는 이유는 무엇입니까?

DOCTYPE을 제거하면 높이 100%가 작동하는 이유는 무엇입니까?

이 코드 조각은 전체 페이지를 녹색으로 채우려고 합니다. div:

그러나 예상대로 작동하지 않습니다. div는 보이지 않는 상태로 유지됩니다. DOCTYPE 선언()을 제거하면 div가 갑자기 확장되어 전체 페이지를 채웁니다. 이는 다음 두 가지 질문을 제기합니다:

DOCTYPE 선언을 제거하지 않고 div가 페이지를 채우도록 하려면 어떻게 해야 합니까?

DOCTYPE 선언을 제거하지 않고 div가 페이지를 채우도록 하려면 DOCTYPE의 경우 루트 요소(html)의 높이를 다음과 같이 설정하면 됩니다. 100%:

html { height: 100%; }

DOCTYPE 선언을 제거하면 왜 작동하나요?

DOCTYPE이 있으면 브라우저는 표준에 따라 페이지를 렌더링합니다. 방법. 표준 모드에서 하위 요소의 높이 백분율은 height:auto로 처리됩니다(상위 요소에 명시적인 높이가 없는 경우). 이것이 표준 모드에서 div가 페이지를 채우지 않는 이유입니다.

그러나 DOCTYPE이 없으면 브라우저는 쿼크 모드로 전환됩니다. 특수 모드에서는 하위 요소의 높이 백분율이 뷰포트를 기준으로 측정됩니다. 이는 위 예의 div 높이가 뷰포트 높이의 100%로 설정되어 있기 때문에 쿼크 모드에서 전체 페이지를 채운다는 의미입니다.

결론

페이지가 표준 모드로 렌더링되도록 하려면 항상 DOCTYPE 선언을 포함하는 것이 중요합니다. Quirks 모드는 신뢰할 수 없고 예측할 수 없으므로 어떤 대가를 치르더라도 피해야 합니다. 선호되는 DOCTYPE 선언은 다음과 같습니다.

위 내용은 DOCTYPE이 제거될 때 100% 높이 div가 페이지를 채우는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!