Div 100% height works on Firefox but not on IE

Question

I have a div container containing two inner divs; both should take 100% width and 100% height in the container.

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

Below is a simplified version of my stylesheet.

#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'm doing wrong? Or any Firefox / IE quirks I miss?

Answer 1

I think that "works fine in Firefox" is only in Quirks mode . In Standard Mode rendering , this may not work in Firefox.

the percentage depends on the "containing block", and not on viewing.

CSS specification says

The percentage is calculated using the relative height of the generated block containing the block. If the height of the containing block is not explicitly specified (that is, it depends on the height of the content) and this element is not completely positioned, the value evaluates 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% of the height of the viewport, you need to specify the height of the containing block (in this case #container). In addition, you also need to specify the height for the body and html, because the original containing block is "UA dependent".

All you need is ...

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

Answer 2

It is hard to give you a good answer without seeing the html that you are actually using.

Do you output the doctype / method using standard mode? Unable to peek into html reprogramming, this would be my first guess for the difference in html interpretation between Firefox and Internet Explorer.

Answer 3

I'm not sure what problem you are solving, but when I have two side-side containers that should be the same height, I run a little javascript on the page load, which finds the maximum height of the two and explicitly sets the other to the same height . It seems to me that height: 100% can simply mean "make it the size necessary to fully content the content" when what you really want to "make it the size of the largest content."

Note: you will need to resize them again if something happens on the page to change their height - for example, the validation summary becomes visible or a folding menu opens.

Answer 4

I managed to achieve this when I set the container fields to 0:

 #container { margin: 0 px; } 

in addition to all your other styles

Answer 5

You may need to put one or both of them:

 html { height:100%; } 

or

 body { height:100%; } 

EDIT: Oops, did not notice that they were posted. You just need to swim in the container.

Answer 6

I did something very similar to what tvanfosson said, that is, it actually uses JavaScript to constantly monitor the available height in the window through events such as onresize, and use this information to resize the container accordingly (in pixels and not percent).

Keep in mind that this means JavaScript dependency, and it's not as smooth as a CSS solution. You also need to make sure that the JavaScript function is able to correctly return window sizes in all major browsers.

Let us know if one of the previously mentioned CSS solutions works, as it sounds like the best way to fix the problem.

Answer 7

I don’t think IE supports using auto to set the height / width, so you can try giving this a numerical value (for example, suggests Jarett).

Also, it doesn't seem like you are cleaning your floats properly. Try adding this to your CSS for #container:

 #container { height:100%; width:100%; overflow:hidden; /* for IE */ zoom:1; } 

Answer 8

Try it.

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