CSS height – výška prvku bez kúziel a nervov

 

Problémy väčšinou vznikajú vtedy, keď miešame výšku podľa obsahu, podľa rodiča a podľa viewportu bez toho, aby sme si povedali, z čoho sa to vlastne ráta.

---

height: auto (predvolené správanie)

Ak nič neriešime, prehliadač to urobí za nás.

• auto znamená: výška = toľko, koľko potrebuje obsah
• text pribudne → výška sa zväčší
• text zmizne → výška sa zmenší

Toto je default, aj keď height vôbec nenapíšeš.

.ukazka {
  height: auto;
}

Používaj vždy, keď nechceš nič „lámať“ a máš dynamický obsah, napríklad texty, CMS alebo blog.

---

Pevná výška (px)

Ak chceme presnú výšku, musíme ju povedať natvrdo.

.ukazka {
  height: 100px;
}

 

Čo sa stane: prvok má vždy 100px, bez ohľadu na obsah.

Problém: veľa textu → pretečie, málo textu → ostane prázdne miesto.

Používaj len vtedy, keď presne vieš, čo tam bude, napríklad ikonky, bannery, obrázkové boxy alebo jednoduché karty.

---

Percentá (%) – častý zdroj zmätku

Ak chceme výšku v percentách, rodič MUSÍ mať výšku.

Bez výšky rodiča toto nebude fungovať tak, ako človek čaká:

.ukazka {
  height: 50%;
}

Prečo? Pretože prehliadač nevie: 50 % z čoho?

Správny postup:

html, body {
  height: 100%;
}

.ukazka {
  height: 50%;
}

 

 

Pravidlo: percentuálna výška funguje len vtedy, keď má rodič definovanú výšku.

---

min-height a max-height – najpraktickejšie riešenie

Ak nechceme prvok „zabiť“, ale len ho obmedziť.

.ukazka {
  min-height: 100px;
}

Prvok nikdy nebude menší ako 100px, ale môže rásť podľa obsahu.

.ukazka {
  max-height: 200px;
}

Prvok nikdy nebude vyšší ako 200px. Ak je obsahu veľa, môže pretekať alebo sa objaví scroll, podľa ďalších vlastností.

Často sa používajú spolu:

.ukazka {
  min-height: 100px;
  max-height: 300px;
}

Toto je často zdravý kompromis.

---

Viewport jednotky (vh, svh, lvh, dvh)

Ak chceme výšku podľa okna prehliadača.

.ukazka {
  height: 100vh;
}

 

100vh = celá výška viewportu. Ak sú nad alebo pod prvkom ďalšie časti stránky, výsledná stránka môže byť vyššia a vznikne scrollbar.

Pozor na mobil: adresný riadok mení viditeľnú výšku → môže vznikať skákanie obsahu.

height: 100% → závisí od rodiča

height: 100vh → počíta podľa viewportu, nie podľa rodiča

Je to mierka podľa okna, nie podľa layoutu rodiča.

Novšie jednotky (mobil-friendly)

height: 100svh; /* small viewport */
height: 100lvh; /* large viewport */
height: 100dvh; /* dynamic viewport */

Na mobile sa deje toto: hore je adresný riadok, pri scrollovaní sa môže schovať, a tým sa mení viditeľná výška okna.

Staré 100vh sa v niektorých situáciách správa neisto: raz ráta s adresným riadkom, raz bez neho. Výsledok môže byť skákanie layoutu.

svh počíta s menšou, bezpečnejšou výškou. Je stabilnejšie, keď nechceš, aby sa layout menil.

lvh počíta s najväčšou možnou výškou viewportu. To môže byť užitočné vo fullscreen prostredí, ale na klasickej webovej stránke vie spôsobiť, že časť prvku bude schovaná.

dvh znamená: „daj mi aktuálnu výšku viewportu práve teraz“. Keď sa adresný riadok schová alebo vráti, výška sa prepočíta a layout na to reaguje.

Podpora:

• vh → funguje všade
• svh / lvh / dvh → moderné prehliadače
• staršie prehliadače → fallback

Bezpečný zápis:

.ukazka {
  height: 100vh;
  height: 100dvh;
}

Prehliadač si vezme to, čo pozná.

---

Viewport ≠ automaticky fullscreen

dvh, svh, lvh nie sú príkaz „zaber celú obrazovku“. Sú to len jednotky.

Takže:

height: 30dvh;

znamená iba: „Tento prvok má mať 30 % aktuálnej výšky viewportu.“

Kedy to dáva zmysel aj vo vnútri stránky

Hero / vizuálna sekcia, ale nie fullscreen

.hero {
  min-height: 40dvh;
}

Nechceš celú obrazovku, chceš len konzistentný vizuálny dojem na rôznych zariadeniach.

---

„Okno“ v stránke (mapa, kalendár, preview)

.calendar {
  height: 50dvh;
}

Má to byť „pol obrazovky“, zvyšok stránky je text alebo iný obsah.

---

Limity, nie príkazy

Veľmi zdravý pattern je napríklad:

.section {
  min-height: 30svh;
  max-height: 60svh;
}

Tým vlastne hovoríš: nech nie je smiešne malá, ale nech ani nezaberie celú stránku. Viewport tu slúži len ako mierka.

---

Kedy to začne byť divné

Divné to začne byť vtedy, keď prvok vo vnútri bežného toku stránky dostane niečo takéto:

.card {
  height: 100dvh;
}

Karta je súčasťou článku, ale správa sa ako samostatná obrazovka. Vtedy vzniká pocit: „prečo sa tento prvok tvári ako stránka?“

Nie preto, že je to dvh. Ale preto, že je to 100.

---

Viewport jednotky nie sú o hierarchii, ale o mierke.

• % → mierka voči rodičovi
• vh / dvh / svh → mierka voči viewportu

Môžeš ich použiť na 100 % výšky, ale aj na 20–60 % ako pomôcku pre proporcie.

---

height vs line-height (častý omyl)

• height = výška boxu
• line-height = výška riadku textu

.ukazka {
  height: 50px;
  line-height: 50px;
}

Pri jednoradkovom texte to spôsobí, že text bude vertikálne vycentrovaný.

---

Zhrnutie

• Nechcem riešiť výšku ručne → height: auto
• Chcem presnú výšku → px
• Chcem minimum alebo maximum → min-height, max-height
• Chcem výšku podľa viewportu → vh (+ prípadne dvh ako modernejší doplnok)
• Chcem percentá → rodič musí mať výšku