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

CSS Hack: Hack pro "min-height"

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

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

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.