为什么 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中文网其他相关文章！