Wenn es um responsives Design geht, sind relative Maße für die Breite eines Layouts in der Regel unkompliziert. Für die Höhe sieht das jedoch anders aus. height="100%" führt selten zum gewünschten Ergebnis und selbst vh="100%"braucht oft Nachhilfe. Hier kommt dvh – die dynamische Höhe – ins Spiel.
CSS-Maße in %-Angaben
Ein Element mit height="100%" stellt oft einen klassischen Problemfall dar. Das CSS-Koordinatensystem ist relativ, wenn ein Element nicht mit position: absolute festgelegt ist.
Beispiel:
<style>
body {
background: red;
margin: 0;
height: 100%;
}
.fullscreen {
background: blue;
height: 100%;
}
</style>
<body>
<div class="fullscreen">
Dieser Block sollte die gesamte Höhe einnehmen.
</div>
</body>
Problem: Das body-Element nimmt nur die Höhe seines Inhalts an, also des lachsroten Blocks. Per Vorgabe haben die meisten Elemente eine Höhe von auto und nehmen den minimalen Platz ein, den sie für die Anzeige des Inhalts brauchen. Das height="100%" im .fullscreen-Element wird also ignoriert, da es sich auf die Höhe des umfassenden Elements bezieht.
Höhe in vh angeben
Eine weitere Maßeinheit ist vh – die Höhe des Viewports. Mit 100vh würde das Element auf dem Desktop-Monitor tatsächlich so hoch wie das Dokument im Browserfenster. Auf mobilen Geräten, insbesondere bei scrollbaren Seiten, entstehen jedoch Probleme, da die Browser die Höhe des Viewports über die Adressleiste hinaus ausdehnen, um mehr Platz für den Inhalt bereitzustellen.
Beispiel:
<style>
body {
background: red;
margin: 0;
}
.fullscreen {
background: blue;
height: 100vh;
}
</style>
<body>
<div class="fullscreen">
Dieser Block nimmt 100vh ein.
</div>
</body>
Problem: Auf mobilen Geräten kann das 100vh dazu führen, dass der Inhalt nach oben oder unten gescrollt werden kann, was zu einem unschönen Layout führt, wenn die Adressleiste ein- oder ausgeblendet wird.
Dynamische Höhe mit dvh
Um dieses Problem zu lösen, gibt es die neue CSS-Einheit dvh – die dynamische Höhe. Diese Einheit passt die Höhe des Elements dynamisch an, abhängig davon, ob die Adressleiste des Browsers sichtbar ist oder nicht.
Beispiel:
<style>
body {
background: red;
margin: 0;
}
.fullscreen {
background: blue;
height: 100dvh;
}
</style>
<body>
<div class="fullscreen">
Dieser Block nimmt 100dvh ein.
</div>
</body>
Mit height: 100dvh passt sich das .fullscreen-Element dynamisch der Höhe des Viewports an, unabhängig davon, ob die Adressleiste sichtbar ist oder nicht. Neben dvh gibt es auch svh für die kleinere bzw. kürzere Höhe des Viewports und lvh für die größere Höhe.
Kurzfassung
Die Verwendung von relativen Maßeinheiten wie %, vh, und dvh kann im Layout-Design hilfreich sein, aber jede hat ihre eigenen Herausforderungen und Anwendungsfälle. Mit der Einführung von dvh hast du eine zuverlässige Möglichkeit, die Höhe von Elementen auf verschiedenen Geräten dynamisch und responsiv anzupassen.
