Firefox と IE で DIV の高さが 100% にならないのはなぜですか?

Firefox と IE 間の Div 100% 高さの互換性の問題

このシナリオでは、Firefox と IE の間で DIV 要素のレンダリングに不一致が発生しました。具体的には、含まれる DIV 内で高さを 100% に設定しても、IE ではネストされた DIV が最大の高さに拡張されません。

この不一致は、Quirks モードと Standard モードの動作から発生します。

• Quirks モード (Firefox のデフォルトの場合があります) では、高さはビューポートを基準にして計算されます。
• 標準モード (推奨設定) では、高さは含まれているブロックの高さに依存します。

コードでは、包含ブロック (#container) の高さが「auto」に設定されており、標準モードでは高さが未定義になります。その結果、ネストされた DIV の高さも未定義になります。

この問題に対処し、ブラウザ間で一貫性を確保するには、含まれるブロックとその祖先のルート (HTML と本文) までの高さを明示的に定義する必要があります。 elements):

html, body { height: 100%; }
#container { height: 100%; }

これらの要素の高さを設定すると、明確に定義された包含ブロックが確立され、ネストされた DIV がその高さを継承し、すべてのブラウザのコンテナ内で 100% に拡張できるようになります。

以上がFirefox と IE で DIV の高さが 100% にならないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。