CSS vh ein Leitfaden fuer grenzenlose layouts

Ich nutze CSS vh ein Leitfaden fuer grenzenlose layouts, wenn ein Bereich sofort die volle Höhe des Viewports einnehmen soll. Klingt einfach. Ist es auch. Aber genau hier machen viele den gleichen Fehler: Sie denken, 100vh löst alles. Tut es nicht.

Wenn du saubere Hero-Bereiche, Fullscreen-Sektionen oder scrollbare App-Layouts bauen willst, musst du verstehen, was vh wirklich macht. Sonst bekommst du abgeschnittene Inhalte, springende Layouts oder nervige Probleme auf mobilen Geräten.

Was ist CSS vh?

vh steht für Viewport Height. Ein 1vh ist 1 % der Höhe des sichtbaren Browserfensters. 100vh entspricht also der kompletten Höhe des Viewports.

Das ist stark, weil ich damit Elemente unabhängig von festen Pixelwerten steuern kann. Statt zu raten, wie hoch ein Screen ist, lasse ich den Browser rechnen.

.hero {
  height: 100vh;
}

Das reicht für viele einfache Fälle schon aus.

Wann ich vh in Layouts einsetze

Ich verwende vh, wenn ein Bereich visuell dominieren soll. Nicht für alles. Nur dort, wo Höhe wirklich am Viewport hängen soll.

• Hero-Sektionen mit starkem Einstieg
• Landingpages, die sofort Aufmerksamkeit holen
• Fullpage-Screens für Slides, Demos oder Apps
• Centered Content, der mittig im Screen sitzen soll
• Overlay-Layouts, die den ganzen Bildschirm abdecken

Wenn ich nur eine Seite oben sauber aufziehen will, ist vh oft die schnellste Lösung. Wenn ich aber viel Content habe, bevorzuge ich flexible Layouts mit min-height oder Content-basierten Höhen.

Die wichtigste Regel für CSS vh ein Leitfaden fuer grenzenlose layouts

Die wichtigste Regel ist simpel: Nutze vh für Rahmen, nicht für Inhalt.

Der Rahmen kann 100vh sein. Der Inhalt darin darf wachsen. Wenn ich den Inhalt zwangsweise auf eine fixe Viewport-Höhe presse, bekomme ich früher oder später Probleme.

.section {
  min-height: 100vh;
  padding: 2rem;
}

min-height ist oft besser als height, weil der Bereich wachsen kann, wenn mehr Inhalt dazukommt.

Der große Fehler bei 100vh auf Mobile

Hier wird es interessant. Auf mobilen Browsern ist 100vh nicht immer das, was du denkst. Die Browser-Adressleiste verändert die sichtbare Höhe. Das kann dazu führen, dass Elemente abgeschnitten wirken oder der Bildschirm beim Scrollen springt.

Wenn ich mobile Layouts baue, prüfe ich deshalb immer, ob 100vh wirklich die beste Wahl ist. Für moderne Browser gibt es inzwischen bessere Optionen wie svh, lvh und dvh.

• svh = small viewport height, eher die kleinere stabile Höhe
• lvh = large viewport height, eher die größere Höhe
• dvh = dynamic viewport height, passt sich dynamisch an

Wenn ich auf Mobile maximale Präzision brauche, ist dvh oft die bessere Wahl. Mehr dazu findest du direkt in der MDN-Doku: MDN: Viewport-relative lengths.

So setze ich vh sauber ein

Ich halte mich an ein paar einfache Regeln. Das spart Zeit und verhindert Layout-Fehler.

• Nutze min-height statt height, wenn Inhalt wachsen kann.
• Prüfe Mobile zuerst, besonders bei Hero-Sektionen.
• Kombiniere vh mit Flexbox, wenn Inhalte vertikal zentriert sein sollen.
• Nutze calc(), wenn du Header oder Footer abziehen musst.
• Teste mit echter Bildschirmhöhe, nicht nur im Desktop-Emulator.

.page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
}

Das ist ein klassisches Setup für einen starken Einstieg. Klar. Robust. Einfach lesbar.

vh mit Header und Footer kombinieren

Wenn du einen festen Header hast, darfst du ihn nicht ignorieren. Sonst passt der Content nicht in die verfügbare Fläche.

So rechne ich oft:

.main {
  min-height: calc(100vh - 80px);
}

Das heißt: Der Hauptbereich nimmt die volle Viewport-Höhe, minus 80 Pixel für den Header. Einfach, aber effektiv.

Mehr zur calc()-Funktion findest du hier: MDN: calc().

Wann ich nicht vh verwende

Ich benutze vh nicht, wenn der Inhalt im Mittelpunkt steht und nicht der Bildschirm. Das ist wichtig. Denn gutes Layout ist nicht nur visuell stark. Es ist auch funktional.

Ich vermeide vh vor allem bei:

• langen Artikeln und Blogposts
• Formularen mit viel Inhalt
• Tabellen und datenlastigen Views
• Bereichen mit unbekannter Content-Länge

In diesen Fällen gewinne ich mehr mit natürlichem Flow als mit Vollbilddenken.

Praktische Beispiele für bessere Layouts

Wenn ich ein modernes Landingpage-Layout baue, nutze ich vh meistens so:

.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 4rem 2rem;
}

.hero__content {
  max-width: 720px;
}

Das gibt mir einen starken visuellen Einstieg, ohne den Inhalt zu zerquetschen.

Für mobile Varianten gehe ich noch einen Schritt weiter:

.hero {
  min-height: 100dvh;
}

So reagiert das Layout besser auf die echte Browserhöhe. Das ist heute oft die bessere Standardwahl.

Mein Fazit zu CSS vh

CSS vh ein Leitfaden fuer grenzenlose layouts bedeutet für mich: Ich baue damit starke, klare und responsive Seitenbereiche, aber ich verlasse mich nicht blind darauf. vh ist ein Werkzeug. Kein Zauberstab.

Wenn du vh mit min-height, Flexbox und den modernen Viewport-Einheiten kombinierst, bekommst du Layouts, die sauber wirken und sich auf echten Geräten besser verhalten.

Mein Rat: Starte einfach. Teste auf Mobile. Und nutze vh nur dort, wo der Viewport wirklich die Regel vorgibt. Genau dann liefert CSS vh ein Leitfaden fuer grenzenlose layouts den größten Effekt.