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 |
2016: Stránka je dlouho neaktualizovaná. Většina věcí, co píšu o Internet Exploreru, už neplatí.
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.
V moderních prohlížečích se border a padding do výšky (height) nepočítají. Chcete-li je počítat, použijte box-sizing.
Č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 6 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 6 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.
V Exploreru 7 je podle všeho tato chyba opravena, takže pokud používáte height pro explorer namísto min-height, je dobré použít podtržítkový hack a zapisovat _height. Takto zapsanou vlastnost Explorer 6 chápe jako min-height, kdežto explorer 7 ji ignoruje.
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 |
---|---|---|
Internet Explorer | 4, 5, 5.5, 6, 7 | všechny verze vykreslují height v rozporu se specifikací liší se quirk a standard mód |
Firefox | všechny verze | |
Opera | všechny verze | |
Chrome | ano |
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.