HTML の「height: 100%」はパーセンテージ値と DOCTYPE の影響をどのように処理しますか?

HTML の高さプロパティとパーセント値

HTML では、高さプロパティをパーセント値に設定して、高さを指定できます。親要素を基準とした要素。ただし、これは親要素に明示的な高さが設定されている場合にのみ機能します。デフォルトでは、要素の高さは暗黙的に「自動」になっています。つまり、要素の高さはコンテンツに基づいて自動的に決定されます。

質問の最初の部分、div を埋める方法に関するものです。 DOCTYPE を削除せずにページを作成するには、CSS を変更して「html」の高さ宣言を含めることで回答できます。要素:

html { 高さ: 100%; }<br>

このソリューションにより、DOCTYPE を削除する必要がなくなり、高さの機能を中断することなくページが標準モードでレンダリングされるようになります。

Quirks モードと標準モード

質問の 2 番目の部分は、DOCTYPE を削除した場合の影響に関するもので、互換モードと標準モードの違いについて詳しく説明しています。

DOCTYPE の場合が存在すると、ブラウザは Web 標準に厳密に準拠する標準モードに入ります。ただし、DOCTYPE が省略された場合、ブラウザは古いブラウザの動作をエミュレートしようとする Quirks モードに切り替わります。

標準モードでは、高さのパーセンテージが常に計算されます。親要素の高さを基準にして。あなたの例では、body 要素には明示的な高さがない (「auto」に設定されている) ため、div の高さ 100% は事実上「auto」として計算され、コンテンツは表示されません。

対照的に、quirks モードは、予測しにくいルールで動作します。このモードでは、div の高さがビューポートの高さを基準にして計算され、期待どおりに div がページ全体に収まるようになります。

gt;結論

div の高さの値を 100% に設定すると、親要素に明示的な高さが定義されている場合にのみ、標準モードで意図したとおりに機能します。 HTML 要素の高さを 100% に設定すると、ページ内の高さのパーセンテージが正しく計算されるようになります。 DOCTYPE が削除されると、ブラウザーは Quirks モードに切り替わります。これにより、パーセンテージの計算が変更され、親の高さが明示的に指定されていない場合でも、div がページを 100% の高さで埋めることができるようになります。

以上がHTML の「height: 100%」はパーセンテージ値と DOCTYPE の影響をどのように処理しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。