IE height 100% issue

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
alex.barylski
DevNet Evangelist
Posts: 6267
Joined: Tue Dec 21, 2004 5:00 pm
Location: Winnipeg

IE height 100% issue

Post 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 :)
matthijs
DevNet Master
Posts: 3360
Joined: Thu Oct 06, 2005 3:57 pm

Post 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).
User avatar
iknownothing
Forum Contributor
Posts: 337
Joined: Sun Dec 17, 2006 11:53 pm
Location: Sunshine Coast, Australia

Post by iknownothing »

not 100% sure, but does bottom: 0; need to be bottom: 0px;??
User avatar
RobertGonzalez
Site Administrator
Posts: 14293
Joined: Tue Sep 09, 2003 6:04 pm
Location: Fremont, CA, USA

Post 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.
Post Reply