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