Question

I have a container div that holds two internal divs; both should take 100% width and 100% height within the container.

I set both internal divs to 100% height. That works fine in Firefox, however in IE the divs do not stretch to 100% height but only the height of the text inside them.

The following is a simplified version of my style sheet.

#container {    height: auto;    width: 100%; }  #container #mainContentsWrapper {    float: left;     height: 100%;    width: 70%;    margin: 0;    padding: 0; }   #container #sidebarWrapper {          float: right;     height: 100%;    width: 29.7%;    margin: 0;    padding: 0; } 

Is there something I am doing wrong? Or any Firefox/IE quirks I am missing out?

Answer 1

I think ‘works fine in Firefox’ is in the Quirks mode rendering only. In the Standard mode rendering, that might not work fine in Firefox too.

percentage depends on ‘containing block’, instead of viewport.

CSS Specification says

The percentage is calculated with respect to the height of the generated box’s containing block. If the height of the containing block is not specified explicitly (i.e., it depends on content height), and this element is not absolutely positioned, the value computes to ‘auto’.

so

#container { height: auto; } #container #mainContentsWrapper { height: n%; } #container #sidebarWrapper { height: n%; } 

means

#container { height: auto; } #container #mainContentsWrapper { height: auto; } #container #sidebarWrapper { height: auto; } 

To stretch to 100% height of viewport, you need to specify the height of the containing block (in this case, it’s #container). Moreover, you also need to specify the height to body and html, because initial Containing Block is ‘UA-dependent’.

All you need is…

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