CSS vlastnost height určuje výšku prvku.
hodnoty | výška prvku |
---|---|
délka | zadaná výška prvku |
x% | x procent výšky okna nebo nadřazeného prvku se zadanou výškou |
auto | výška se vypočítá podle obsahu |
Normálně si prvky počítají výšku podle svého obsahu. Výška se jim dá ale i zadat vlastností height.
Pokud je obsah prvku menší než výška zadaná vlastností height, pod obsahem bude prázdné místo. Co naopak přeteče, řeší vlastnost overflow. Přetečený obsah zvětší v Exploreru výšku prvku. V jiných prohlížečích ne (což většinou není problém, pokud se z toho nedopočítávají další vnořené věci nebo pokud prvek nemá rámeček).
Podle specifikace vlastnost height nefunguje na řádkové elementy (např. odkaz <a>). U nich by mělo být potřeba pro nastavení výšky použít výšku řádku line-height nebo jim předtím říci, že jsou blokové (display: block). To ale platí jenom u normálních prohlížečů (třeba Mozilla). Internet Explorer v quirk modu totiž dovoluje výšku nastavovat i pro řádkové elementy. Příklad použití height na řádkový element. V praxi je ale lepší fakt na to používat line-height.
Vlastnost height se velmi podobá vlastnosti width (šířce), ale existují rozdíly. Například ve výpočtu procent. Šířka width bere za základ šířku dokumentu, kdežto height bere jako základ výšku okna.
Internet Explorer (v quirk módu) chybně počítá do výšky height i border a padding, kdežto podle specifikace (a Mozilla nebo standardní mód Exploreru to tak dělá) se border a padding do výšky (height) nepočítají.
Častá chyba vzniká překlepem při zápisu, plete se pořadí písmen t a h. Správně je width a height. Widht a heigth je špatně. Lze si to pamatovat tak, že nikdy není stejné písmenko na začátku i na konci.
Když zadáte třeba tagu div výšku v Exploreru a obsah divu bude vyšší, obsah vyteče. Standardní prohlížeče se v tu chvíli chovají tak, že obsah nechají vytékat (podle nastavení overflow), ale třeba rámeček kreslí podle zadané výšky. Explorer se chová jinak. Chápe height tak, jako standardní prohlížeče chápou min-height. Takže obsah nechá přetékat, ale případný rámeček vykreslí až pod obsahem a div roztáhne.
Když je divu nastavena výška v procentech, tak ta procenta se vztahují k nadřazenému prvku, respektive k jeho výšce nastavené vlastností height. (Pokud výška zadaná není, probublává se výše a hledá se výška, až na úroveň okna.)
Zajímavé je, že Internet Explorer ve quirk režimu počítá procentuální výšku nikoliv z nastavené výšky nadřazeného prvku, ale z výšky obsahu nadřazeného prvku.
Pokud se uvnitř nějakého prvku v Exploreru pozicuje, tak se jako sto procent výšky bere chybně výška obsahu (nikoli nastavená výška) bez ohledu na to, zda je stránka ve quirk nebo ve standardním módu.
Prohlížeč | Podpora ve verzích | Poznámka |
---|---|---|
4, 5, 5.5, 6 | všechny verze vykreslují height v rozporu se specifikací liší se quirk a standard mód |
|
Mozilla (Netscape 6+) | všechny verze | |
Opera | 3, 4, 5, 6, 7 | |
Konqueror | ano | |
IE 5 / Mac | ano | |
Netscape Navigator 4 | chybně | nevypočitatelné chování |
Internet Explorer u některých prvků nedokáže nastavit výšku menší, než je výška jednoho řádku. Myslím, že to souvisí s tím, zda element obsahuje text nebo alespoň mezeru, ale nevím to jistě.
Výšku nelze dobře nastavovat formulářovým prvkům. Zejména <input> a <select> jsou prakticky nestylovatelné věci. Inputu se sice výška nastavit dá, ale v každém prohlížeči to vypadá jinak (i proto, že jde o prvek řádkový).
Například je možné nastavit výšku nadpisu. Jde přitom o výšku, kterou nadpis zabírá v prostoru stránky, nikoli o výšku písma (font-size):
<style>
h2 {height: 40px}
h3 {height: 30px}
</style>
takovéto stylování nadpisů se ale v praxi moc nepoužívá, protože předvídatelnějšího efektu lze dosáhnout nastavením vnějších okrajů (margin). Ale fungovalo by to, protože tagy h2 a h3 jsou blokové (zalamuje se za nimi řádek).
Příklad použití height na řádkový element.
Přímý styl se u height zadává zřídka. Následující zápisy obrázku jsou ekvivalentní:
<img src="banner.gif" width="468" height="60">
<img src="banner.gif" style="width: 468px; height: 60px">
Jak psát web píše Yuhů, Dušan Janovský. Kontakt. Poslední aktualizace 14. února 2005.