Firefox と Internet Explorer で Div Heights のレンダリングが異なるのはなぜですか?

IE Div Height レンダリングの異常

Web 開発では、ブラウザ間の互換性の問題がよく発生します。そのような問題の 1 つは、Firefox と Internet Explorer の間の div の高さのレンダリングの不一致です。

問題:

この場合、コンテナ div には 2 つの子 div があり、理想的には、コンテナ内の幅と高さを 100% 占有します。 Firefox では、これは期待どおりに機能します。ただし、IE では、div はコンテンツの高さまでしか拡張されず、その上に空きスペースが残ります。

根本原因:

主な違いは、その割合にあります。 -ベースの高さが計算されます。 Firefox では、パーセンテージはビューポートの高さに相対します。ただし、IE では、それを含むブロックの高さ (この場合はコンテナー div です) を基準にします。

解決策:

この問題を解決するには、次のようにします。コンテナ div の高さを明示的に指定するために必要です。さらに、包含ブロックが祖先要素になる可能性があるため、 の高さを設定することをお勧めします。そして

要素も100%にします。これにより、コンテナ div の高さを正しく計算できるようになります。

以下の修正された CSS コードでは、 の高さは

<code class="css">html, body { height: 100%; }
#container { height: 100%; }
#container #mainContentsWrapper { height: 100%; }
#container #sidebarWrapper { height: 100%; }</code>

です。は 100% に設定され、 の高さは 100% に設定されます。そしても指定されます:

以上がFirefox と Internet Explorer で Div Heights のレンダリングが異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。