Why Do Divs Not Stretch to Container Height in IE?

Height Calculations in Divs: Firefox vs. IE Compatibility

In a web page with two divs nested within a container, the expectation is for both inner divs to fully occupy the width and height of the container. However, it has been observed that in Internet Explorer (IE), the inner divs only expand to the height of the text they contain, unlike in Firefox where they stretch to the full container height.

The provided stylesheet sets both inner divs, #mainContentsWrapper and #sidebarWrapper, to 100% height. This works as intended in Firefox, but not IE. The reason for this discrepancy lies in the CSS Specification's definition of percentage height.

Percentages in height measurements rely on the height of the "containing block," not the viewport. In the given scenario, #container serves as the containing block for the inner divs. As the height of #container is set to "auto," it depends on the content height. Consequently, the percentage height of the inner divs is effectively calculated as "auto," which results in the unexpected behavior in IE.

To address this issue, the height of #container must be explicitly defined. Additionally, to ensure the divs stretch to the full height of the viewport, the height of the and elements also needs to be specified.

By making these adjustments, the code should behave as expected in both Firefox and IE:

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

The above is the detailed content of Why Do Divs Not Stretch to Container Height in IE?. For more information, please follow other related articles on the PHP Chinese website!