Viele angesagte Websites haben heute Vollbild-Sections auf ihrer Startseite. Wenn sie nicht bildschirmfüllend sind, nehmen sie mindestens 80 bis 90 Prozent der Fläche ein, und das kostet Entwicklerzeit und eine Menge JavaScript-Programmierung.

Um zu veranschaulichen, wovon ich rede, sind hier ein paar Beispiele von Websites, die dieses Layout verwenden:

Spotify nutzt data-Attribute, um die Höhenproportionen zu speichern, wie etwa data-autosize="0.6" und legt dann die Höhe jeder Section mit JavaScript fest.

Exposure legt eine fixe Höhe von 90 Prozent für die Header-Section fest und ändert sie beim Resize per JavaScript.

Nimber verwendet eine ähnliche Technik wie Spotify. Die Höhe wird mit JavaScript auf 90 Prozent gesetzt, erhält aber auch eine Mindesthöhe min-height, die sicherstellt, dass Sections, die größer sind als der Viewport (typischerweise auf dem Handy), korrekt angezeigt werden.

Und natürlich …

Yahoo brachte Anfang des Jahres eine Vollbild-Version von Flickr heraus, die jeder Section eine Höhe von 100 Prozent gibt, und sie ersetzten auch das Scrollen durch eine eigene Technik. In diesem Artikel steht, wie sie das angestellt haben.

Alle bisherigen Beispiele nutzen JavaScript, um dieses Layout hinzukriegen, aber wie wäre es, wenn wir es mit reinem CSS umsetzen könnten, dass auch noch von einer großen Reihe moderner Browser unterstützt wird?

Was wäre, wenn wir das mit nur einer Zeile CSS machen könnten …

.section { height: 100vh; }

Richtig, das ist die Viewport-Höhe, 1 vh = 1 Prozent der Browser-Höhe.

Ohne jeden Programmieraufwand kennt viewport height jederzeit die Höhe des Browserfensters und kann die Section passend dazu setzen. Ich habe ein CodePen-Demo gemacht, das diese Methode nutzt, und es scheint auch nach mehreren Browser-Resizes perfekt zu funktionieren.

Code anschauen | Demo anschauen

Diese Methode ist sehr mächtig, weil damit unendliche Kombinationen von Layouts machbar sind. Nehmen wir mal an, du willst, dass alle Sections eine Höhe von 100 Prozent besitzen, nur die erste soll 90 Prozent hoch sein, um dem Benutzer das Gefühl von Kontinuität zu vermitteln – kein Problem. Alles, was du dazu brauchst, ist eine zusätzliche Zeile:

.section { height: 100vh;}

.section-first { height: 90vh; }

Die Browser-Unterstützung ist sehr gut und liegt laut caniuse.com bei 78,38 Prozent, inklusive Support von IE9+ – schau selbst:

Das sieht fast zu schön aus, um wahr zu sein – ohne ausgiebiges Testing kann ich allerdings noch nicht sagen, wie es um die Nachteile dieser Technik steht und ob man sie einsetzen sollte oder nicht. Aber du kannst sie ausprobieren und herausfinden, ob sie für deine Anforderungen passt. Fehlerproduzierende Browser kannst du mit ein paar Zeilen JavaScript abfangen, oder du suchst dir ein Polyfill, dass das für dich erledigt.

Zu guter Letzt muss ich noch ein letztes Beispiel erwähnen, das Sections sehr geschickt, nur mit CSS, einsetzt und dabei einen etwas anderen Ansatz verfolgt: 6wunderkinder.com. Die Leute von Wunderlist nutzen einen fest positionierten Header, der die Möglichkeit bietet, die Höhe der Sections exakt auf height: 100% festzulegen. Das ist ein etwas anderes Vorgehen, mit einigen Vor- und Nachteilen, aber ein tolles Beispiel, das ganz ohne JavaScript auskommt.

Für mich war das ein Aha-Erlebnis in CSS, und ich bin sehr gespannt zu lesen, was du von dieser Methode hältst. Lass einen Kommentar hier oder schick mir einen Tweet an @ckor.

Der Beitrag „Make full screen sections with 1 line of CSS“ erschien zuerst auf medium.com.

Vielleicht auch interessant: Ihr wollt Dropdown-Menüs mit CSS erstellen?? Hier findet ihr Tutorials und Demos, die euch weiterhelfen.