Min-height

CSS vlastnost min-height určuje minimální výšku prvku.

min-height
hodnoty výška prvku
délka nastavená výška nebo větší
procento procento z výšky nadřazeného prvku (tagu), nebo větší
0 minimální výška není omezena

Výška prvků je buďto jejich přirozená výška, nebo výška určená CSS vlastností height. Vlastnost min-height přináší další způsob, jak výšku prvku předepsat. Uplatní se to zejména v případech, kdy předem není znám obsah prvku nebo výška závisí procentuálně na velikosti okna.

Pokud jsou zadány jak min-height, tak height a jsou v konfliktu, pak min-height přebije height.

Explorer min-height nepodporuje, ale dá se hackovat (příklad níže).

Podpora

Podpora vlastnosti min-height
Prohlížeč Podpora ve verzích Poznámka

Internet Explorer 6 a starší

ne lze simulovat pomocí height, protože tak height funguje
Internet Explorer 7 ano, pouze ve standardním módu  
Mozilla (Firefox, Netscape 6+ atd.) všechny verze  
Opera 7, 8, 9  
Konqueror asi ano  
IE 5 / Mac nevím, asi ne  
Netscape Navigator 4 ne  

Příklady

Následující příklad je zastaralý, protože Internet Explorer 6 už v praxi není potřeba řešit.

CSS vlastnost min-height nepodporuje Internet Explorer 6 (podobně jako max-heigth nebo min-width). Stejného efektu se dá ale dosáhnout pomocí vlastnosti height a nějakého hacku, například podtržítkového. Explorer totiž když vidí height a výška obsahu mu přeleze, tak height stejně ignoruje a výšku prvku klidně zvětší. Takže třeba takhle:

<style>
#prvek {
    min-height: 100px; /* pro standardní prohlížeče */
    _height: 100px; /* pro Internet Explorer 6, který to chápe jako min-height*/
}
</style>

Pokud děláte stránky ve quirk módu, je potřeba místo podtržítkového hacku _height použít hack třeba mřížkový #height.

Občas se uvádí jiná konstrukce využívající v Exploreru konstrukci expression:

<style>
#prvek {min-height: 100px;
height: expression(this.scrollHeight < 100? "100px" : "auto" );
overflow: visible;}
</style>

 

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.