DOCTYPE 선언 없이 높이 100%가 작동하는 이유는 무엇입니까?

Question

전체 코드는 다음과 같습니다.

으아악

아무것도 나타나지 않습니다. 그러나 첫 번째 행(doctype)을 제거하면 모든 페이지가 예상대로 녹색으로 변합니다.

두 가지 질문이 있습니다:

1. 마크업을 제거하지 않고 페이지를 div 채우는 방법은 무엇입니까?
2. 삭제하면 왜 정상적으로 작동되나요? doctype

Answer 1

세로로 말씀하셨나요? div는 블록 수준 요소이므로 기본적으로 상위 요소를 가로로 채웁니다.

이 기능이 제대로 작동하려면 HTML 태그의 높이도 100%로 설정해야 합니다.

으아아아

여기에서 실제 예시를 확인하세요:

http://jsfiddle.net/uhg0y9tm/1/

다른 사람들이 말했듯이 첫 번째 줄(HTML5 문서 유형)을 제거하면 브라우저는 페이지를 다르게 렌더링하므로 HTML 태그에 대해 명시적인 높이를 100% 지정할 필요가 없습니다.

Answer 2

CSS height 속성, 백분율 값 및 DOCTYPE

질문 의 div첫 번째 부분에서는

에 100% 높이를 적용하는 방법을 묻는 질문이 있는데, 이는 다른 사람들이 여러 번 답변한 내용입니다. 기본적으로 루트 요소의 높이를 선언합니다.

으아아아

전체 설명은 여기에서 확인할 수 있습니다:

• heightCSS 속성과 백분율 값
을 사용하세요.

---

질문의 두 번째 부분

은 관심을 훨씬 덜 받았습니다. 나는 이 질문에 답하려고 노력할 것이다.

DOCTYPE(문서 유형 선언)을 제거하면 브라우저가 표준 모드에서 이상한 모드

로 전환됩니다.

호환 모드라고도 알려진 이상한 모드에서 브라우저는 오래된 브라우저를 에뮬레이트하여 오래된 웹 페이지(웹 표준이 존재하기 전에 작성된 페이지)를 구문 분석할 수 있습니다. 이상한 모드의 브라우저는 작성자가 의도한 대로 이전 코드를 렌더링할 수 있도록 IE4, IE5 및 Navigator 4

인 것처럼 가장합니다.

다음은 Wikipedia

에서 특수 모드를 정의하는 방법입니다.

다음은 MDN

의 의견입니다:

height: 100%이제 코드의 가 이상한 모드에서는 작동하지만 표준 모드에서는 작동하지 않는 구체적인 이유는 다음과 같습니다.

표준 모드高度: auto （没有定义高度），那么子元素的百分比高度也将被视为 height: auto에서 상위 요소에 (사양에 따라

)이 있는 경우.

html { height: 100%; }첫 번째 질문에 대한 답변은

.

입니다. height: 100% 在 div 中工作，您必须在父元素上设置 height 가 에서 작동하려면 상위 요소에

를 설정해야 합니다(

자세한 내용height: auto). 그러나 이상한 모드에서 상위 요소에

가 있는 경우 하위 요소의 높이 백분율은

뷰포트를 기준으로 측정됩니다

. 🎜 🎜이 동작을 다루는 세 가지 참고 자료는 다음과 같습니다. 🎜

• https://www.cs.tut.fi/~jkorpela/weird mode.html
• https://stackoverflow.com/a/1966377/3597276
• https://developer.mozilla.org/en-US/docs/Mozilla_Quirks_Mode_Behavior

---

TL;DR

간단히 말하면 개발자가 알아야 할 사항은 다음과 같습니다.