CSS-Maße in %-Angaben
Ein Element mit 100% der Höhe ist ein klassischer Problemfall. Das CSS-Koordinatensystem ist relativ, wenn ein Element nicht mit position: absolute festgelegt ist.
Wenn das Element direkt innerhalb des Body-Elements liegt, wird es trotz height=“100%“ nur so hoch wie sein Inhalt, denn die Angabe der Höhe bezieht sich auf die Höhe des umfassenden Elements – auf das body-Element.
Das Body-Element wiederum nimmt nur die Höhe seines Inhalts an, also des lachsroten Blocks. Auch wenn die Seite im Browserfenster die Hintergrundfarbe des body-Elements annimmt: border zeigt, wie hoch das body-Element ist.
body {
background: ivory;
margin: 0;
}
.fullscreen {
background: salmon;
height: 100%;
}
Die Konsole des Browsers zeigt beim Hovern über dem lachsroten Element dieselbe Höhe wie für das body-Element. 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.
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. Das gilt aber nicht fürs Handy: Dort läßt sich die Seite nach oben scrollen, so dass der Inhalt verschwindet.
Eigentlich müsste der blaue Rand des Blocks im Browserfenster unsichtbar bleiben, und erst ein Stück scrollen bringt ihn zum Vorschein. Der Grund ist das Chrome des Browsers, die Adressleiste.
Wenn die Seite auf dem Handy höher wird
Die Browser dehnen die Höhe des Viewports über die Adresseleiste hinaus aus, um mehr Platz für den Inhalt bereit zu stellen. Damit entsteht also eine dynamische Höhe. Das Feld für die Eingabe der URL ist noch sichtbar, wenn die Seite geladen wurde. Sobald der Benutzer die Seite scrollt, dehnt sich der Viewport aus.
Erst wenn der Benutzer zurück »nach oben« an den Anfang der Seite scrollt, wird die Höhe des Inhalts eingeschränkt, die Adressleiste wird wieder sichtbar.
CSS Höhe mit dvh – dynamische Höhe
Da kommt die jüngste unter den Maßeinheiten ins Spiel: dvh, die dynamische Höhe. Also:
.fullscreen {
background: salmon;
height: 100dvh;
}
Neben der wahlbekannten Einheit vh haben sich damit svh für die kleinere bzw. kürzere Höhe des ViewPorts und lvh für die größere Höhe hinzugesellt. dvh ist für die dynamische Anpassung der Höhe bei der Vergrößerung des ViewPorts gedacht.
