English-only | Jenom česky | Bilingual/Dvojjazyčně

CSS Hack: The "min-height" Hack

Let's see what's the problem. Following three boxes have set the min-height property to 100px. But only Opera and Mozilla do support this property.

.box1 {
   background:yellow;
   min-height:100px;
   }
...
<div class="box1">...</div>
less text
more text more text more text more text more text more text

Only Opera and Gecko-based browsers should display them at least 100px high.

The Hack

We will use a next bug of MSIE. It wrongly treates the overflow:visible value. Instead of overflowing the content over the box's borders, the box height is stretched as if the height property was set to auto.

Following boxes use the "min-height" hack. Their height is set to 100px (MSIE will stretch them if their content is too high). The next rule contains an atribute-selector (only Opera and Mozilla support it as well as the min-height property). This rule overrides the height back to auto for Opera and Mozilla. MSIE, which doesn't support atribute selectors, ignores it.

.box2 {
   background:yellow;
   min-height:100px;
   height:100px;
   }
div[class] .box2 {
   height:auto;
   }
...
<div class="someclass">
   <div class="box2">...</div>
</div>
less text
more text more text more text more text more text more text

That's it. This solution makes the box at least 100px high in Win/MSIE, Opera and any Gecko-based browser (Mozilla, Firefox, Camino etc.). Mac/MSIE has a bug — the parent box is stretched if it's height is set to auto. The simple solution is to cover the box with another one. The outer box will define border, background etc., the inner one will use the min-height hack. (But Mac/MSIE is almost dead...) Some browsers stay out of this hack — especially Konqueror/Safari. Hopefully the min-height will be supported in Safari's next release... (updated: min-height is now supported in Safari).

Note: Other way to use the "min-height" hack is to use The Underscore Hack instead of the atribute selector.