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

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

リーリー

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

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

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

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

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

リーリー

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

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

---

あなたの質問の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

---

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