height

height - výška prvku

 

Článok: CSS height – výška prvku bez kúziel a nervov

 

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ť“, máš dynamický obsah (texty, CMS, blog)

Pevná výška (px)

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

.ukazka {
  height: 100px;
}

 

Čo sa stane: prvok má vždy 100px, obsahu je jedno, či sa zmestí

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

Používaj len keď: robíš ikonky, bannery, karty, presne vieš, čo tam bude

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

Ak chceme výšku v %, rodič MUSÍ mať výšku.

Ak nemá výšku rodič, len toto NEBUDE fungovať:

.ukazka {
  height: 50%;
}

Prečo? - prehliadač nevie: 50% z čoho? Správny postup:

html, body {
  height: 100%;
}

.ukazka {
  height: 50%;
}

 

 

Pravidlo: percentá výšky fungujú len ak rodič má definovanú výšku.

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

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

.ukazka {
  min-height: 100px;
}

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

.ukazka {
  max-height: 200px;
}

nikdy nebude vyšší ako 200 px, obsah môže pretekať

Často spolu:

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

Toto je zdravý kompromis.

Viewport jednotky (vh, svh, lvh, dvh)

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

.ukazka {
  height: 100vh;
}

 

100vh = celá výška obrazovky (ak sú nejaké prvky pred a za{nad a pod} , tie sa prirátajú k výške, vznikne scrollbar na boku.)

Pozor na mobil: adresný riadok mení výšku → skákanie obsahu

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

height: 100vh -  ignoruje rodiča aj súrodencov

Je to absolútna jednotka, nie relatívna k layoutu.

Novšie jednotky (mobil-friendly)

height: 100svh; /* small viewport */ - Najmenšia možná výška okna
height: 100lvh; /* large viewport */ - Najväčšia možná výška okna 
height: 100dvh; /* dynamic viewport */ - Aktuálna výška okna v danom momente

Na mobile sa deje toto: hore máš adresný riadok, keď scrolluješ, schová sa, tým pádom sa zmení výška viditeľnej obrazovky

Staré 100vh sa správa takto: raz ráta s adresným riadkom, raz bez neho, výsledok: skákanie layoutu

"svh": ráta aj s adresným riadkom, ráta s najhorším scenárom a už to nemení.

"lvh": počíta výšku tak, akokeby adresný riadok neexistoval.  Ale adresný riadok tam stále je, len výpočet výšky je väčší než aktuálne viditeľná plocha. Preto prvok má väčšiu výšku, časť je schovaná pod adresným riadkom, môže vzniknúť scroll. lvh je určené pre prostredia, kde je viewport trvalo maximálny – typicky PWA alebo fullscreen aplikácie, nie klasické webové stránky.

"dvh": znamená „Daj mi výšku okna takú, aká je PRÁVE TERAZ.“  Čo sa deje: scrolluješ → adresný riadok zmizne → výška sa zväčší, scroll hore → adresný riadok sa vráti → výška sa zmenší.  Áno: mení sa, prepočítava sa, layout reaguje. Toto je viewport jednotka, ktorá je zámerne dynamická.

Podpora (Can I Use):

  • vh → OK všade

  • svh / lvh / dvh → moderné prehliadače (Chrome, Safari, Firefox nové verzie)

  • staré 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 mierky.

Takže: height: 30dvh;

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

 

Kedy to už zmysel má (aj vo vnútri stránky)

Hero / vizuálna sekcia, ale nie fullscreen

.hero {
  min-height: 40dvh;
}

Nechceš celú obrazovku, chceš konzistentný vizuálny dojem, bez ohľadu na výšku zariadenia.

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

.calendar {
  height: 50dvh;
}

Má to byť „pol obrazovky“, zvyšok je text, reaguje to na zmenu viewportu.

Limity, nie príkazy

Veľmi zdravý pattern je:

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

Čo tým hovoríš: nech nie je smiešne malá, nech nezaberie celú stránku, viewport slúži len ako mierka.

Kde je hranica, kedy to začne byť divné

Divné to je vtedy, keď:

.card {
  height: 100dvh;
}

a karta je súčasťou článku, nemá význam „obrazovky“, ignoruje rodiča.

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 obrazovke

Použiť ich môžeš na 100 % (layout obrazovky), ale aj na 20–60 % (vizuálne proporcie)

height vs line-height (častý omyl)

  • height = výška boxu

  • line-height = výška riadku textu

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

Text bude vertikálne vycentrovaný (1 riadok).

Zhrnutie 

  • Nechcem riešiť → height: auto

  • Chcem presnú výšku → px

  • Chcem minimálnu / maximálnu → min-height, max-height

  • Chcem podľa obrazovky → vh (+ dvh)

  • Percentá → iba ak rodič má výšku