ホームページ >ウェブフロントエンド >CSSチュートリアル >DOCTYPE が削除された場合、高さ 100% の div だけがページを埋めるのはなぜですか?
DOCTYPE が削除された場合、高さ 100% の div だけがページを埋めるのはなぜですか?
- Mary-Kate Olsenオリジナル
- 2024-12-27 13:37:11438ブラウズ
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 サイトの他の関連記事を参照してください。