Feb 28, 2008

100% Height Div in Firefox

It was a surprise for me to find out that this is actually a problem with tricks and hacks involved.

Once I wanted to make 100% height div, I've found lots of “solutions”, all of which were either ie-only or involved render the div as a table cell or caused it to be exactly 100% of the screen height, ignoring the height of the actual content (which might be bigger), or caused scrollbar to appear even though content was fitting in one screen.

Although none of the solutions was perfect, when properly combined they actually do the thing.

General concepts are:
— Make html and body elements 100% high to allow inner blocks height setup;
— Set container's height to auto and min-height to 100% to avoid content overflow;
— Don't put content in the container itself but use it as a wrapper to allow padding without scrollbar

So here it goes: 100% height div for both IE and Firefox.
View source to see how it's done.

No comments: