DOCTYPE 宣言なしで高さ 100% が機能するのはなぜですか?

Question

これは完全なコードです:

リーリー

何も表示されません。ただし、最初の行 (doctype) を削除すると、すべてのページが期待どおり緑色に変わります。

質問が 2 つあります:

1. マークアップを削除せずに div をページいっぱいに表示するにはどうすればよいですか?
2. doctype を削除すると正常に動作するのはなぜですか?

Answer 1

垂直って意味ですか？ div はブロックレベルの要素であるため、デフォルトでは親要素を水平に埋めます。

これを機能させるには、HTML タグの高さを 100% に設定する必要もあります。

リーリー

ここで実際の例を参照してください:

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

ここで他の人が言っているように、最初の行 (HTML5 ドキュメント タイプ) を削除すると、ブラウザーはページを異なる方法でレンダリングします。その場合、HTML タグの高さを明示的に 100% に指定する必要はありません。

Answer 2

CSS height プロパティ、パーセンテージ値、および DOCTYPE

質問の 最初の部分 は、 div に 100% の高さを適用する方法を尋ねており、他の人が何度も回答しています。基本的に、ルート要素の高さを宣言します:

リーリー

完全な説明はここにあります:

• CSS height プロパティとパーセンテージ値 を使用します。

---

あなたの質問の 2 番目の部分 はあまり注目されていません。この質問に答えてみます。

DOCTYPE (Document Type Declaration) を削除すると、ブラウザは Standard Mode から Weird Mode に切り替わります。

互換モードとも呼ばれる奇妙なモードでは、ブラウザは古いブラウザをエミュレートして、古いWebページ、つまりWeb標準が存在する前に作成されたページを解析できるようにします。奇妙なモードのブラウザは IE4、IE5、および Navigator 4 のふりをして、作成者が意図したとおりに古いコードをレンダリングできるようにします。

Wikipedia

での Quirks モードの定義方法は次のとおりです: 以下は

MDN

の意見です:

コード内の height: 100% が奇妙なモードでは機能するが、標準モードでは機能しない具体的な理由を次に示します。 標準モード

では、親要素の height: auto (高さが定義されていない) の場合、子要素の高さのパーセンテージも height として扱われます。自動 (仕様による)。 だからこそ、最初の質問に対する答えは

html { height: 100%; }

.

height: 100%

を div で機能させるには、親要素に height を設定する必要があります (詳細) 。 ただし、奇妙なモードでは、親要素の

height: auto

がある場合、子要素の高さのパーセンテージは ビューポート を基準にして測定されます。 この動作について説明している 3 つの参考文献を次に示します。

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

---

簡単に言うと、開発者が知っておくべきことは次のとおりです: