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.
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| 4, 5, 5.5, 6 | MP uvádí u verzí 4.0 a 5.0
problémy, všechny verze vykreslují height v rozporu se specifikací |
|
| 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ě.
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">
Width = šířka, Overflow = přetékání obsahu, Line-height = výška řádku, Módy prohlížečů, Display = způsob zobrazení prvku
o tvorbě, údržbě a zlepšování internetových stránek