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

CSS Hack: The "min-height" Hack

CSS Hack: Hack pro "min-height"

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.

Podívejme se, v čem je problém. Následující tři boxy mají nastavenu vlastnost min-height na 100px. Pohříchu tuto vlastnost podporují jen Opera a Mozilla.

.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.

Všechny boxy se zobrazí vysoké aspoň 100px jen v Opeře a prohlížečích postavených na jádře Gecko.

Hack

Využijeme další chyby v MSIE. Ten chybně zpracovává hodnotu overflow:visible. Namísto aby obsah přetékal přes hranice boxu, box se natáhne na výšku, stejně jako by měl nastaveno height:auto.

Následující boxy používají "min-height" hack. Jejich hodnota height je nastavena na 100px (MSIE je ale natáhne, pokud je jejich obsah příliš vysoký). Další pravidlo obsahuje selektor s atributem (který, stejně jako vlastnost min-height podporují jen Opera a Mozilla). Toto pravidlo přepíše hodnotu height pro Operu a Mozillu zpět na auto. MSIE, který selektory s atributem nezná, ji bude ignorovat.

.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.

To je vše. Tento postup zajistí, že box bude alespoň 100px vysoký ve Win/MSIE, Opeře a Gecko-prohlížečích (Mozilla, Firefox, Camino atd.). Mac/MSIE má chybu — rodičovský box se natáhne, pokud je jeho výška auto. Řešením je uzavřít box do jiného boxu — vnější bude mít definovaný rámeček, pozadí atd., an vnitřní se použije "min-height" hack. (Ale Mac/MSIE je skoro mrtvý...) Některých prohlížečů se hack nedotkne — především Konqueroru/Safari. Snad bude podpora min-height doplněna v nějaké příští verzi... (update: Safari již min-height podporuje).

Pozn.: Další možností, jak implementovat "min-height" hack, je použít místo selektoru s atributem Podtržítkový hack.