Cross-Browser solution for CSS min-height

Monday, February 12, 2007

You must have tried to put your footer at the bottom of the page when the page content is less. The best possible solution that strikes here is to use the CSS min-height property. But alas, this is not compatible with Internet Explorer.

One option could have been to postion the footer to the bottom by specifying the following snipplet of code.
postion: absolute;
bottom: 0;
But, it won't work for bigger pages. In this case, the footer would stick to the bottom of the screen and not bottom of the page content.

So, here's a simple hack which could solve your purpose:

min-height:450px;
height:auto !important;
height:450px;

Just add this code to the div element above the footer. This code would work perfectly work on both Firefox and IE. Firefox would simply accept the min-height property. While, IE will ignore this property and would render the element according to the height property. The keyword auto will automatically extend the height as per the contents of the page. !important is used to set a higher priority to this line of code, so that it is executed when height of the page exceeds 450px.