IE6 Min-height ‘Hack’ that isn’t
Now that IE7 recognizes the min-height but so many people are still using IE6, how do we make sure that IE6 “gets” min-height without hacking?
According to Shelly on the CSS-Discuss list, the cleanest simplest way is to use the cascade and the fact that IE6 treats height as if it’s min-height.
First you use this AT THE END OF your stylesheet:
html, body {
height: 100%;
min-height: 100%;
}
Then you follow it with whatever div you wish to also be full height.
div#mainwrapper {
height: 100%;
min-height: 100%;
}
Because IE6 doesn’t understand min-height it instead reads and uses height, while all other browsers will follow the cascade and use min-height instead. This allows us to get IE6 in line without conditionals or hacks, and yet feed all browsers exactly what they need.
[tags]IE6 min-height[/tags]
June 19th, 2007 at 10:22 am
A sometimes simpler and safer solution is to create an element with 0 width and x height, and float it left inside the container element. sometimes the above mentioned solution will mess up a site design, specifically when using things such as bottom absolutely positioned elements i.e. for footers.
June 20th, 2007 at 11:04 am
Absolute Positioning? That creates a whole lot more problems than this non hack does.
July 13th, 2007 at 9:50 am
i was looking for this solution and it worked like a charm for me. had to add // like this though:
html, body {
//height: 100%;
min-height: 100%;
}
because without that, firefox thought it was height 100%, which it takes as absolute i think.
July 13th, 2007 at 9:59 am
Anja, the cascade is feeding the good browsers min-height, which they understand. Only IE6 is getting height.