Why Do Div Heights Render Differently in Firefox and Internet Explorer?

IE Div Height Rendering Anomaly

In web development, it's common to encounter cross-browser compatibility issues. One such issue is the discrepancy in div height rendering between Firefox and Internet Explorer.

The Problem:

In this case, the container div has two child divs that should ideally occupy 100% width and height within the container. In Firefox, this works as expected. However, in IE, the divs only extend to the height of their content, leaving empty space above them.

Root Cause:

The key difference lies in how percentage-based height is calculated. In Firefox, the percentage is relative to the height of the viewport. However, in IE, it's relative to the height of the containing block, which is the container div in this case.

Solution:

To resolve this issue, it's necessary to specify the height of the container div explicitly. Additionally, since the containing block can be an ancestor element, it's advisable to set the height of the and elements to 100% as well. This ensures that the height of the container div can be calculated correctly.

In the revised CSS code below, the height of the is set to 100%, and the heights of and are also specified:

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

The above is the detailed content of Why Do Div Heights Render Differently in Firefox and Internet Explorer?. For more information, please follow other related articles on the PHP Chinese website!