Min-height
CSS vlastnost min-height určuje minimální výšku prvku.
| 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
| 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
