How to: 100% page height in all browsers with CSS

Ever struggled to get that nice 100% height layout in all of the main browsers (including the headache we know as IE6)? Well we've had that problem as well, and the solution is fairly simple. Time to share!

Here is how we managed to get around it:

Code

For IE6

• body { height:100% }

For IE7

• html { height:100% }

For Firefox etc.

• You require a container DIV with height set to 100%

Summary

So, for the benefit of IE you'd put this in your CSS:

• body, html { height:100%; }

And for FF you would use:

• .myfullheightdiv { height:100%; }

You can safely put all three of these solutions together on one page, and voila! Cross browser, CSS styled 100% height. Hope that's cleared that one up, any comments are welcome below!