IE6 min-height CSS hack without JavaScript
Internet Explorer 6. I don’t hate it. Yes I do.
Here’s the story of an interesting min-height hack I came upon working with an outside design firm today. Technically it’s an exploit, since it’s exploiting a bug in IE6’s box model, but since we all know what people think when they see “IE6″ and “exploit” in the same sentence, lets just leave ‘er be at “hack.”
When you define the height on a block element, let’s say a DIV, it’s pretty simple:
div { height: 500px }
However, if that div’s content (assuming normal document flow) will run longer than 500px in height, and you haven’t told the DIV what to do with the overflow, the height you’ve defined will act as a minimum height… like the min-height you can’t use since this is IE6.
So there you go. Use min-height in your master CSS document, and use height in your IE6 specific CSS document. Its really that simple.
Tricky, idin’t it 