Mi az a CSS dvh?

Miért okozott gondot a 100vh?

A vh egység definíció szerint a viewport magasságának egy százaléka. Asztali gépen ez teljesen egyértelmű: a böngészőablak tartalmi területe nem változik görgetés közben.

Mobilon viszont igen. A címsor és az alsó navigációs sáv lefelé görgetve összecsukódik, felfelé görgetve újra megjelenik — a látható terület tehát folyamatosan mozog. A böngészőknek dönteniük kellett, mit jelentsen ilyenkor a vh, és a legtöbben azt választották, hogy rögzítik a legnagyobb lehetséges értéket: azt, amikor a böngésző felülete teljesen összecsukódott.

Ennek két látható következménye lett:

• egy height: 100vh szekció alja induláskor a képernyő alá lóg,
• a „pontosan egy képernyő magas” dizájn mégis görgethetővé válik,
• a hero aljára tervezett gomb vagy scroll-jelzés kicsúszik a látótérből.

Évekig kerülő megoldásokkal éltünk: JavaScriptből mértük a valódi magasságot, és egy CSS változóba írtuk (--vh), majd calc()-csal szoroztuk vissza. Működött, de egy layout-alapproblémát oldott meg futásidejű kóddal.

A viewport egységek új családja

A CSS ma már nem egyetlen viewport-magasságot ismer, hanem hármat — mert mobilon valóban három különböző értelmes válasz létezik a kérdésre, hogy „mekkora a képernyő”.

• svh (small viewport height) — a legkisebb látható magasság, vagyis amikor a böngésző minden felülete látszik.
• lvh (large viewport height) — a legnagyobb látható magasság, amikor a címsor és a navigáció összecsukódott. Ez az, amit a legtöbb böngésző vh-ként ad vissza.
• dvh (dynamic viewport height) — a pillanatnyi érték, ami görgetés közben követi a böngésző felületének mozgását.

A 100dvh tehát nem egy fix szám, hanem egy élő érték: mindig annyi, amennyi hely éppen tényleg rendelkezésre áll.

A vh azt mondja meg, mekkora lehet a képernyő. A dvh azt, mekkora most.

A leggyakoribb eset: a hero szekció

Az alapvető használat pontosan olyan egyszerű, amilyennek látszik:

.hero {
    min-height: 100dvh;
}

Két apró, de fontos részlet van ebben a három sorban. Az egyik a min-height a height helyett: így ha a tartalom mégis magasabb lenne egy képernyőnél, nem vágódik le, hanem szépen kifut. A másik, hogy a dvh már a fallback nélkül is helyes eredményt ad ott, ahol támogatott.

Ha régebbi böngészőket is ki kell szolgálnod, a fallback egyetlen extra sor. A CSS a legutolsó értelmezhető szabályt alkalmazza, így a dvh-t nem ismerő böngésző egyszerűen átugorja a második deklarációt:

.hero {
    min-height: 100vh;  /* régebbi böngészők */
    min-height: 100dvh; /* mindenki más */
}

Nem kell hozzá @supports, nem kell hozzá JavaScript, és nem kell hozzá build lépés.

Mikor melyiket használjuk?

A dvh nem univerzális válasz — attól függ, mit épp építesz. Egy egyszerű gondolatmenet, ami a legtöbb esetben eldönti a kérdést:

• dvh — ha az elemnek ki kell töltenie a látható területet, és a mérete nyugodtan változhat: hero szekciók, teljes képernyős slide-ok, oldalsó menük.
• svh — ha az elem semmiképp nem lóghat ki: fix alsó sávok, sticky CTA gombok, mobil app-szerű felületek, ahol az alsó gomb mindig elérhető kell legyen.
• lvh — ritkán kell, jellemzően akkor, ha szándékosan a maximális magasságra tervezel és a kilógás elfogadható.

Ökölszabálynak jó: dizájnhoz dvh, garanciához svh. Ha valaminek mindig látszania kell, ne a dinamikus értékre bízd.

Nem csak magasság

Ugyanez a logika végigmegy az összes viewport egységen, nem csak a magasságon. Mindegyik megkapta a s, l és d előtagot:

• dvw — dinamikus viewport szélesség,
• dvmin és dvmax — a kettő közül a kisebb, illetve a nagyobb,
• dvi és dvb — inline és block irányú méret, írásirány-függetlenül.

A gyakorlatban a dvh az, amiért a család létrejött — a szélesség mobilon jóval ritkábban változik menet közben.

Amire érdemes figyelni

A dvh ereje egyben a korlátja is: az értéke tényleg változik görgetés közben, és a böngészőnek emiatt újra kell számolnia az elrendezést.

Ne animálj vele

Ha egy dvh-ban megadott magasság CSS átmenettel van ellátva, a böngésző felületének minden mozdulata elindít egy animációt. Az eredmény ugráló, akadozó layout. A méretváltozást itt hagyd azonnalinak.

Vigyázz a tartalom eltolódásával

Ha egy hosszú oldal közepén van egy 100dvh magas blokk, akkor görgetés közben a magassága — és vele az utána következő tartalom pozíciója — elmozdul. Teljes képernyős szekciókat ezért érdemes az oldal elejére tenni, vagy svh-t használni középen.

A billentyűzet külön kérdés

Mobilon a felugró virtuális billentyűzet nem minden böngészőben számít bele a viewport magasságába. Ha űrlapfókusz közben is stabil elrendezés kell, a dvh önmagában nem elég — ott a interactive-widget viewport beállítás vagy a Visual Viewport API a megfelelő eszköz.

Böngészőtámogatás

A dinamikus viewport egységeket a Safari 15.4, a Chrome 108, az Edge 108 és a Firefox 101 óta minden nagy böngésző támogatja. 2026-ban ez gyakorlatilag a teljes aktív felhasználói bázist lefedi, a fenti kétsoros vh fallback pedig a maradékot is rendezi.

Ha eddig JavaScriptes --vh megoldást használtál, ezt nyugodtan kitörölheted: a natív egység pontosabb, gyorsabb, és nem villan meg az első festés előtt.