ホームページ > ウェブフロントエンド > CSSチュートリアル > DOCTYPE が削除された場合、高さ 100% の div だけがページを埋めるのはなぜですか?

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

Mary-Kate Olsen
リリース: 2024-12-27 13:37:11
オリジナル
444 人が閲覧しました

Why does a 100% height div only fill the page when the DOCTYPE is removed?

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

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

<!DOCTYPE HTML>
<html>
<body>
ログイン後にコピー

しかし、期待どおりに動作しません。 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 html>
ログイン後にコピー

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

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート