Responsive Design nach Höhe: vh, dvh & clamp() nutzen

Responsive Design denken wir fast immer in der Breite. Dabei ist das eigentliche Problem oft die Höhe: Auf dem MacBook besteht der halbe erste Bildschirm aus Überschrift und Leerraum. Auch die Fensterhöhe lässt sich ansteuern – mit vh, dvh, clamp() und Media Queries. Ein Praxis-Tutorial mit Code.

1. Das Problem: flache Fenster, zu wenig Inhalt

Ein typisches 13-Zoll-MacBook hat im Browser oft nur rund 700 bis 750 Pixel nutzbare Höhe – Menüleiste, Tab-Bar und Dock abgezogen. Ein Hero-Bereich, der auf einem 27-Zoll-Monitor großzügig und einladend wirkt, frisst auf diesem Display fast den gesamten sichtbaren Bereich. Überschrift, Subline, viel Weißraum – und der eigentliche Inhalt beginnt erst nach dem Scrollen.

Das ist kein Designfehler im klassischen Sinn. Es ist eine Lücke im Denken: Wir optimieren Layouts fast reflexartig für schmale Fenster, aber selten für flache. Dabei ist die Fensterhöhe eine ebenso valide Dimension wie die Breite.

2. Warum wir fast nur an die Breite denken

Die Gründe sind historisch. Der Durchbruch des Responsive Designs kam mit dem Smartphone – und da ging es zunächst um eines: Ein breites Desktop-Layout musste auf ein schmales Handy passen. Media Queries, Grids, Breakpoints – das gesamte Vokabular hat sich um die Breite herum gebildet. Der Viewport wurde zur Breitenfrage.

Vertikal wurde stattdessen gescrollt. Höhe galt als unendlich verfügbar, weil man ja nach unten weiterscrollen kann. Das stimmt für Fließtext. Für den ersten Eindruck – den Bereich „above the fold“, den man ohne Scrollen sieht – stimmt es nicht. Und genau dort entscheidet sich, ob eine Website Substanz zeigt oder erst einmal Luft.

3. Ja, Design kann auf die Höhe reagieren

Media Queries kennen nicht nur width, sondern auch height. Man kann also gezielt auf flache Fenster reagieren und dort Abstände und Schriftgrößen reduzieren:

@media (max-height: 800px) {
.hero {
padding-block: 2rem;     /* statt z. B. 6rem */
}
.hero h1 {
font-size: 2rem;
}
}

@media (max-height: 600px) {
.hero {
padding-block: 1rem;
}
.hero h1 {
font-size: 1.5rem;
}
}

Das Prinzip ist identisch zur Breite, nur die Achse ist eine andere. Für den MacBook-Fall ist das oft schon die halbe Miete: Unterhalb einer bestimmten Höhe wird der Hero kompakter, und der Inhalt rückt nach oben in den sichtbaren Bereich.

Höhe und Breite zusammen abfragen

Media Queries lassen sich kombinieren. So greift eine Regel nur, wenn das Fenster gleichzeitig breit genug und flach ist – typisch für Laptops im Querformat:

@media (min-width: 1024px) and (max-height: 800px) {
  .hero {
    padding-block: 2.5rem;
  }
}

4. vh und dvh: Abstände an die Fensterhöhe koppeln

Media Queries schalten in Stufen. Oft schöner ist eine stufenlose Skalierung – und dafür gibt es die Viewport-Einheiten. 1vh entspricht einem Prozent der Viewport-Höhe. Abstände und sogar Schriftgrößen können damit direkt mit dem Fenster mitwachsen:

.hero {
  padding-block: 8vh;   /* skaliert mit der Fensterhöhe */
}
.hero h1 {
  font-size: 5vh;
}

Wird das Fenster flacher, schrumpfen Abstand und Schrift automatisch mit. Kein Breakpoint, kein Sprung.

Der Klassiker: dvh statt vh auf Mobilgeräten

Auf Smartphones hat das klassische vh eine bekannte Schwäche: Es rechnet mit der Fensterhöhe ohne die ein- und ausblendende Adressleiste. Ein Element mit height: 100vh ragt deshalb beim Scrollen unter die Browser-Leiste – ein Stück Inhalt wird abgeschnitten. Die Lösung sind die dynamischen Viewport-Einheiten dvh (dynamic viewport height), die diesen Effekt korrekt berücksichtigen:

.fullscreen-section {
  height: 100dvh;   /* berücksichtigt die mobile Browser-Leiste */
}

Ergänzend gibt es svh (kleinster Zustand, Leiste sichtbar) und lvh (größter Zustand, Leiste ausgeblendet). Für die meisten Fälle ist dvh die richtige Wahl. Der Browser-Support ist inzwischen flächendeckend – alle aktuellen Versionen von Chrome, Safari, Firefox und Edge verstehen die Einheiten.

5. clamp(): die eleganteste Lösung für Schrift und Abstände

Reine vh-Werte haben einen Haken: Ohne Grenzen wird die Schrift auf sehr großen Displays riesig und auf sehr flachen winzig. Genau dafür gibt es clamp(). Die Funktion nimmt drei Werte – Minimum, Wunschwert, Maximum – und skaliert stufenlos dazwischen:

.hero h1 {
  font-size: clamp(1.75rem, 4vh + 0.5rem, 3rem);
}
.hero {
  padding-block: clamp(1.5rem, 6vh, 5rem);
}

Die Überschrift wird nie kleiner als 1.75rem und nie größer als 3rem, skaliert dazwischen aber flüssig mit der Fensterhöhe. Das ist der beste Kompromiss: mitwachsend, aber nie außer Kontrolle.

Faustregel: Media Queries für strukturelle Sprünge, clamp() für die feine, stufenlose Skalierung dazwischen.

Breite und Höhe mischen

clamp() ist nicht auf eine Achse festgelegt. Wer möchte, kombiniert Breite (vw) und Höhe (vh) im mittleren Wert und bekommt so Schrift, die auf beide Dimensionen reagiert:

.hero h1 {
  font-size: clamp(2rem, 2vw + 3vh, 4rem);
}

Ein Hinweis aus der Praxis: Sparsam dosieren. Schrift, die auf zu viele Faktoren gleichzeitig reagiert, wird schwer vorhersehbar. Meist reicht eine Hauptachse plus vernünftige Grenzen.

6. Was oft besser ist als Höhen-Tricks

Bevor man Höhen-Media-Queries übereinanderstapelt, lohnt der Blick auf die Ursache. Häufig ist ein Hero schlicht zu hoch angesetzt – etwa mit fixem height: 100vh. Eine min-height statt einer festen Höhe löst viele Probleme von selbst, weil der Bereich bei wenig Platz nicht künstlich aufgebläht wird:

.hero {
  min-height: 60vh;   /* statt height: 100vh */
  display: flex;
  align-items: center;
}

Ebenso wirksam: großzügige Abstände grundsätzlich über clamp() definieren statt über feste rem-Werte. Dann skaliert das gesamte Layout ruhig mit – ganz ohne einen einzigen Breakpoint.

7. Fallstricke aus der Praxis

Ein paar Dinge, die in echten Projekten regelmäßig Ärger machen:

vh auf Mobilgeräten ohne dvh-Fallback führt zu abgeschnittenen Vollbild-Bereichen – siehe oben. Schriftgrößen ausschließlich in vh oder vw ohne Grenzen sind ein Barrierefreiheits-Risiko, weil sie das Zoomen und die Nutzervorgaben aushebeln können; clamp() mit einem rem-Anteil entschärft das. Und zu viele Höhen-Breakpoints machen ein Stylesheet schnell unwartbar – im Zweifel lieber eine stufenlose Lösung als fünf Stufen.

Wichtig bleibt: Diese Technik ersetzt kein durchdachtes Layout. Sie ist ein Werkzeug, um vorhandenen Inhalt sinnvoll auf den verfügbaren Platz zu verteilen – nicht, um ein überladenes Design zu retten.

8. Fazit

Responsive Design endet nicht an der Breite. Wer die Fensterhöhe mitdenkt, holt gerade auf Laptops spürbar mehr Inhalt in den sichtbaren Bereich – ohne dass große Monitore darunter leiden. Die Werkzeuge sind alle da und breit unterstützt: height-Media-Queries für Sprünge, vh und dvh für die Kopplung an das Fenster, clamp() für die stufenlose Feinsteuerung. Für den klassischen „Auf dem MacBook ist zu wenig zu sehen“-Fall genügt oft schon eine einzige max-height-Regel, die die Hero-Abstände halbiert.

Der eigentliche Schritt ist ein gedanklicher: die Höhe als gleichberechtigte Dimension zu behandeln. Dann fühlt sich eine Website auf jedem Gerät passend an – nicht nur auf dem, auf dem sie gebaut wurde.