Why Are My DIVs Not 100% Height in Firefox and IE?

Div 100% Height Compatibility Issues Between Firefox and IE

In this scenario, you've encountered a disparity in the rendering of DIV elements between Firefox and IE. Specifically, setting the height to 100% within a containing DIV doesn't expand the nested DIVs to the full height in IE.

The discrepancies arise from the Quirks mode and Standard mode behaviors:

• In Quirks mode (which Firefox may default to), the height is calculated relative to the viewport.
• In Standard mode (the recommended setting), the height depends on the containing block's height.

In your code, the containing block (#container) has a height set to 'auto', which in Standard mode, yields an undefined height. As a result, the nested DIVs' height also becomes undefined.

To address this issue and ensure consistency across browsers, you should explicitly define the height of the containing block and its ancestors up to the root (HTML and body elements):

html, body { height: 100%; }
#container { height: 100%; }

By setting the height of these elements, you establish a well-defined containing block, enabling the nested DIVs to inherit that height and stretch to 100% within their container in all browsers.

The above is the detailed content of Why Are My DIVs Not 100% Height in Firefox and IE?. For more information, please follow other related articles on the PHP Chinese website!