Update 2019:
___________________________________
Seit der Entstehung dieses Blogbeitrags ist bereits einiges (9 Jahre!!) an Zeit vergangen. Inzwischen sind keine JavaScript Kenntnisse mehr notwendig, da der Browser Support für die neuen Viewport Units inzwischen beinahe perfekt ist.
Damals waren noch ganze 8 Zeilen JS Code notwendig! Mittlerweile ist dies mit nur einer einzigen CSS Codezeile möglich:
.wrapper {
height: 100vh;
}Neben vh gibt es noch weitere nützliche Viewport Units. Eine gute Zusammenfassung gibt es auf CSS Tricks.
___________________________________
100% Viewport - so wird's gemacht!
Ein CSS-Layout mit 100% Fensterhöhe (Viewport) zu erstellen klingt nach einer einfachen Aufgabe. Doch bei der Umsetzung stellt man schnell fest, dass es nicht so ist. Denn während es ohne Probleme möglich ist, ein Div mittels “width:100%” auf die maximale Breite einer Website einzustellen, führt der gleiche Ansatz bei der Höhe - mit “height:100%” - nicht zum gewünschten Erfolg. Was tun?
In diesem Artikel möchte ich euch einen kleinen Leitfaden an die Hand geben: Mein schnellster Weg zu einem 100% Viewport - seid ihr bereit?
Die Höhe eines Divs, oder der Weg aus dem Mysterium.
Um die Höhe eines Divs festzulegen, gibt es zuerst einmal zwei grundlegende Möglichkeiten:
- Eine explizite Höhe zuordnen, z.B. height: 500px.
- Keinen Wert festlegen - die Höhe ergibt sich dann aus dem Inhalt.
Wenn der Inhalt aber die festgesetzte Höhe - in unserem Beispiel 500px - überschreitet, führt das zu einer Fehldarstellung. Der Inhalt ragt über das Div hinaus.
Um dieses Problem zu umgehen, gibt es noch eine dritte Möglichkeit: die Mindesthöhe! Anstatt einer festgesetzten Höhe wird ein minimaler Wert bestimmt, z.B min-height:500px. Somit ist das Div immer mindestens 500px hoch. Sollte der Inhalt diese Höhe dennoch überschreiten, wächst das Div mit und eine Fehldarstellung wird vermieden.
Schritt für Schritt zu einem 100% Viewport.
Mit diesen Kenntnissen kann mittels jQuery die Browserhöhe abgefragt und die Mindesthöhe an das Div übergeben werden.
<!DOCTYPE html>
<html>
<body>
<div class="wrapper"></div>
</body>
</html>
<script>
function sizeContent() {
var newHeight = $("html").height() + "px";
$(".wrapper").css("min-height", newHeight);
}
</script>Wird die Seite geladen, muss die folgende Funktion aufgerufen werden:
$(document).ready(function () {
sizeContent();
});Wenn der Benutzer das Browserfenster aber skaliert, stimmt die Höhe des Wrappers nicht mehr mit dem Viewport überein. Damit muss die Funktion erneut aufgerufen werden, sobald das Browserfenster sich ändert. Der Code erweitert sich dann um folgenden Eintrag:
$(document).ready(function () {
sizeContent();
$(window).resize(sizeContent);
});Hindernisse geschickt umschifft.
Die Mindesthöhe-Methode funktioniert einwandfrei - bis zum ersten von zwei Nachteilen. Ist man sich den Stolpersteinen bewusst, kann man diese ohne weiteres beiseite räumen.
- Wenn JavaScript deaktiviert wurde, funktioniert diese Methode nicht.
- Der Inhalt der Seite kann während des ladens “springen”.
Wie lassen sich diese 2 Nachteile umgehen? Betrachten wir das Problem anhand der Breitenangabe - und dem folgenden Beispiel.
<!DOCTYPE html>
<html>
<body>
<div class="wrapper"></div>
</body>
</html>Geben wir dem Div mit der Klasse “Wrapper” eine Breite von 100%, so entspricht dies exakt der Browserbreite.
Hat das übergeordnete Element (body) aber eine fixe Breite von 400px, so wird auch das Div die Breite von 400px nicht überschreiten - selbst wenn das Browserfenster z.B. 700px breit ist! Merke: 100% Breite bezieht sich stets relativ zum body.
Fazit: Prozentuelle Angaben stehen also in Relation zum übergeordneten Element.
RahmenSache - kleine Erweiterung, große Wirkung.
Wenn wir dem HTML- und body-Tag einen Rahmen geben, passiert folgendes: Die Höhe ergibt sich analog zum Wrapper! Wird beiden eine Höhe von 100px zugeordnet, so wird der Wrapper mit Height 100% ebenfalls 100px hoch.
Die Lösung besteht also darin, dem HTML- und body-Tag eine Höhe von 100% zu geben.
html, body {
height: 100%
}Mit dieser einfachen CSS Erweiterung können wir dem Wrapper nun ohne Probleme eine Mindesthöhe von 100% zuordnen - und sehen sofort den gewünschten Effekt.
Sollen mehrere Divs oder Sektionen eine Höhe von 100% haben, funktioniert diese Methode ebenfalls reibungslos. Nehmen wir zum Beispiel einen Blog mit mehreren Artikeln. Damit nicht alle Beiträge auf einmal im Viewport erscheinen, sondern einzeln sichtbar sind, ist es wichtig, dass jeder Artikel 100% hoch angelegt werden.
<!DOCTYPE html>
<html>
<body>
<section></section>
<section></section>
</body>
</html>Mein Fazit.
Wie es beim Programmieren üblich ist, führen viele Wege ans Ziel. Für welche Methode man sich entscheidet, das bleibt jedem selbst überlassen. Die CSS Variante ist sicherlich die einfachere. Je nach Design muss man aber doch zur Jquery Lösung greifen.
