Height

CSS vlastnost height určuje výšku prvku.

height
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.

standardní boxmodel s oddělenými vlastnostmi

Č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.

Explorer 6 chápe height jako min-height

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.

Dědění výšky v Exploreru

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.

Podpora

Podpora vlastnosti height
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ý).

Příklady

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">

Další příklady

Textové odkazy jako tlačítko

 

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.