DOCTYPE が削除された場合、高さ 100% の div だけがページを埋めるのはなぜですか?

DOCTYPE が削除されると高さが 100% 機能するのはなぜですか?

このコード スニペットは、ページ全体を緑色で塗りつぶそうとします。 div:

しかし、期待どおりに動作しません。 div は非表示のままです。 DOCTYPE 宣言 () を削除すると、div は突然ページ全体に拡大します。これにより 2 つの疑問が生じます:

DOCTYPE 宣言を削除せずに div をページに埋め込むにはどうすればよいですか?

gt;

削除せずに div をページに埋め込むにはDOCTYPE では、ルート要素 (html) の高さを次のように設定するだけです。 100%:

html { height: 100%; }

DOCTYPE 宣言を削除すると機能するのはなぜですか?

DOCTYPE が存在する場合、ブラウザは標準でページをレンダリングしますモード。標準モードでは、親要素に明示的な高さがない場合、子要素の高さのパーセンテージは height: auto として扱われます。これが、標準モードで div がページを埋めない理由です。

ただし、DOCTYPE が存在しない場合、ブラウザは quirks モードに切り替わります。 quirks モードでは、子要素の高さのパーセンテージがビューポートを基準にして測定されます。これは、上記の例の div は、高さがビューポートの高さの 100% に設定されているため、quirks モードでページ全体を埋めることを意味します。

結論

ページが標準モードで表示されるようにするには、常に DOCTYPE 宣言を含めることが重要です。 Quirks モードは信頼性が低く、予測不可能であるため、絶対に回避する必要があります。推奨される DOCTYPE 宣言は次のとおりです:

以上がDOCTYPE が削除された場合、高さ 100% の div だけがページを埋めるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。