Page 1 of 1

IE height 100% issue

Posted: Sun Feb 18, 2007 5:12 pm
by alex.barylski
Here is what I have

Code: Select all

<div style="position: absolute; top: 0px; right: 0%; width: 200px; bottom: 0; height: 100%; z-index: 0; background-color: yellow; "></div>
Works like a charm in FireFox, but not in IE...as the height is only adjusted to it's parent's visible height, FireFox does the same but when there is more content than can be visibly shown on screen, the DIV height adjusts, but IE, not...

Is there any known hack which I can use to make this DIV recalculate the height based on content or not???

If there is, I would be one very happy camper :)

Cheers :)

Posted: Mon Feb 19, 2007 2:22 am
by matthijs
Normally IE would expand a div when the content increases. Even when you give it a fixed width/height. That's one difference with other browsers. Why that's not happening in this case is not clear (I don't feel like turning on my pc to test). Maybe it has something to do with the position absolute, combined with bottom:0;

Could you try this:

Code: Select all

div#container {
position: relative;
min-height: 100%;
height:auto !important; /* for modern browsers */
height:100%; /* for IE */
}
You can also look at http://themaninblue.com/experiment/footerStickAlt/ That is about a sticky footer but the principle of getting a 100% height applies to that too (whether you use a footer or not is your choice then).

Posted: Mon Feb 19, 2007 4:52 pm
by iknownothing
not 100% sure, but does bottom: 0; need to be bottom: 0px;??

Posted: Mon Feb 19, 2007 5:11 pm
by RobertGonzalez
Look in Useful Resources in Client Side. I posted a link to a site that demos how to make a footer stick to the bottom of the screen in IE. It does that by expanding the content area to a min-height of 100%. It is a hack, but it works.