為什麼 Div Heights 在 Firefox 和 Internet Explorer 的呈現方式不同？

IE Div 高度渲染異常

在 Web 開發中，經常會遇到跨瀏覽器相容性問題。其中一個問題是 Firefox 和 Internet Explorer 之間的 div 高度渲染差異。

問題：

在這種情況下，容器 div 有兩個子 div，它們應該理想情況下，佔據容器內 100% 的寬度和高度。在 Firefox 中，這按預期工作。然而，在 IE 中，div 僅延伸到其內容的高度，在其上方留下空白空間。

根本原因：

主要差異在於百分比計算基於的高度。在 Firefox 中，百分比與視窗的高度相關。然而，在 IE 中，它是相對於包含區塊的高度，在本例中是容器 div。

解決方案：

要解決此問題，可以使用以下方法：需要明確指定容器 div 的高度。此外，由於包含區塊可以是祖先元素，因此建議設定 的高度。和元素也達到100%。這確保了容器div的高度可以正確計算。

在下面修改後的CSS程式碼中，的高度為0。設定為 100%，且 的高度為 100%。和也指定：

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

以上是為什麼 Div Heights 在 Firefox 和 Internet Explorer 的呈現方式不同？的詳細內容。更多資訊請關注PHP中文網其他相關文章！