これは完全なコードです:
リーリー何も表示されません。ただし、最初の行 (doctype) を削除すると、すべてのページが期待どおり緑色に変わります。
質問が 2 つあります:
div をページいっぱいに表示するにはどうすればよいですか? doctype を削除すると正常に動作するのはなぜですか? 
P粉0434322102023-10-27 00:47:01
垂直って意味ですか？ div はブロックレベルの要素であるため、デフォルトでは親要素を水平に埋めます。
これを機能させるには、HTML タグの高さを 100% に設定する必要もあります。
リーリーここで実際の例を参照してください:
http://jsfiddle.net/uhg0y9tm/1/
ここで他の人が言っているように、最初の行 (HTML5 ドキュメント タイプ) を削除すると、ブラウザーはページを異なる方法でレンダリングします。その場合、HTML タグの高さを明示的に 100% に指定する必要はありません。
P粉9044059412023-10-27 00:30:23
height プロパティ、パーセンテージ値、および DOCTYPE 質問の 最初の部分 は、 div に 100% の高さを適用する方法を尋ねており、他の人が何度も回答しています。基本的に、ルート要素の高さを宣言します:
完全な説明はここにあります:
height プロパティとパーセンテージ値 を使用します。 あなたの質問の 2 番目の部分 はあまり注目されていません。この質問に答えてみます。
DOCTYPE (Document Type Declaration) を削除すると、ブラウザは Standard Mode から Weird Mode に切り替わります。
互換モードとも呼ばれる奇妙なモードでは、ブラウザは古いブラウザをエミュレートして、古いWebページ、つまりWeb標準が存在する前に作成されたページを解析できるようにします。奇妙なモードのブラウザは IE4、IE5、および Navigator 4 のふりをして、作成者が意図したとおりに古いコードをレンダリングできるようにします。
Wikipediaでの Quirks モードの定義方法は次のとおりです: 以下は
MDNコード内の height: 100% が奇妙なモードでは機能するが、標準モードでは機能しない具体的な理由を次に示します。
< /p> 標準モード
では、親要素の height: auto (高さが定義されていない) の場合、子要素の高さのパーセンテージも height として扱われます。自動 (仕様による)。
だからこそ、最初の質問に対する答えは
.
を div で機能させるには、親要素に height を設定する必要があります (詳細) 。
ただし、奇妙なモードでは、親要素の
がある場合、子要素の高さのパーセンテージは ビューポート を基準にして測定されます。
この動作について説明している 3 つの参考文献を次に示します。