Min-height in Safari Hack

When coding CSS layouts, min-height is often useful to have around. Unfortunately, it’s not widely supported among browsers (other than Mozilla, natch). (For those not familiar with it, min-height defines a minimum height on an element.) And, generally speaking you can simply make use of min-height (for real browsers) along with height for IE — which essentially treats height like min-height, as it happily busts out of its container if there’s more content than the allotted height.

The tricky part? Safari. If you need to support it, you’ll find that it supports neither min-height nor IE’s pretend min-height. (In fairness to Safari, the code for min-height has been implemented, but the current Safari release doesn’t yet incorporate that.) Fortunately, there is a workaround. Anne van Kesteren discovered that you can make use of the intrinsic nature of display:table-cell to get the same effect in Safari. And, Vinnie Garcia has a good write-up on the technique.

Really, it’s an extension of the old IE-pretend-min-height idea. A regular height is defined and then that element is further set to display:table-cell — and since table cells automatically expand as needed, Safari in effect gets a min-height property.

The only downside is that, while IE/Windows ignores display:table-cell, IE/Mac goes a bit nuts. But, that can be worked around by using the star-HTML hack which can be used to feed separate CSS to IE (both Mac & Windows). So, the complete min-height set of properties (supporting Mozilla, IE/Windows, IE/Mac and Safari) could look something like this: