ホームページ >ウェブフロントエンド >CSSチュートリアル >Firefox と IE で DIV の高さが 100% にならないのはなぜですか?

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

Susan Sarandon
Susan Sarandonオリジナル
2024-11-02 21:21:02848ブラウズ

Why Are My DIVs Not 100% Height in Firefox and IE?

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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。