IE で Div がコンテナの高さに合わせて拡張されないのはなぜですか?

Div での高さの計算: Firefox と IE の互換性

コンテナー内に 2 つの div がネストされている Web ページでは、次のことが期待されます。両方の内部 div がコンテナーの幅と高さを完全に占めるようにします。ただし、Internet Explorer (IE) では、内部 div は、コンテナーの高さ全体まで拡張される Firefox とは異なり、含まれるテキストの高さまでしか拡張されないことが観察されています。

提供されたスタイルシート セット両方の内部 div、#mainContentsWrapper と #sidebarWrapper を 100% の高さにします。これは Firefox では意図したとおりに機能しますが、IE では機能しません。この不一致の理由は、CSS 仕様の高さのパーセンテージの定義にあります。

高さの測定におけるパーセンテージは、ビューポートではなく、「含まれるブロック」の高さに依存します。指定されたシナリオでは、#container は内部 div を含むブロックとして機能します。 #container の高さは「auto」に設定されているため、コンテンツの高さに依存します。その結果、内部 div の高さのパーセンテージは実質的に「自動」として計算され、IE で予期しない動作が発生します。

この問題に対処するには、#container の高さを明示的に定義する必要があります。さらに、div がビューポートの高さ全体に確実に伸びるように、 の高さを変更します。そして

要素も指定する必要があります。

これらの調整を行うことで、コードは Firefox と IE の両方で期待どおりに動作するはずです。

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

以上がIE で Div がコンテナの高さに合わせて拡張されないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。