t3n News Entwicklung

Zu schön, um wahr zu sein? Vollbild-Sections mit nur einer Zeile CSS

Zu schön, um wahr zu sein? Vollbild-Sections mit nur einer Zeile CSS

Vollbild-Sections mit nur einer Zeile CSS? Klingt fast zu schön, um wahr zu sein. Doch es geht, wie Andrew Ckor auf verschiedenen Seiten gesehen hat. Und er verrät euch auch, wie ihr es selbst umsetzen könnt.

Zu schön, um wahr zu sein? Vollbild-Sections mit nur einer Zeile CSS

(Screenshot: Exposure)

Spotify, Nimber und Flickr: Vollbild per CSS

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:

(Screenshot: Spotify)
Vollbild-Sections per CSS, auch bei Spotify. (Screenshot: Spotify)

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.

(Screenshot: Exposure)
(Screenshot: Exposure)

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

(Screenshot: Nimber)
(Screenshot: Nimber)

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 ...

(Screenshot: Flickr)
(Screenshot: Flickr)

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.

Vollbild-Sections nur mit CSS – ohne JavaScript

Alle bisherigen Beispiele nutzen JavaScript, um dieses Layout hinzukriegen, aber wie wäre es, wenn wir es mit reinem 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.

vollbild_css_demo

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:

vollbild_css_caniuse

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.

(Screenshot: 6Wunderkinder)
(Screenshot: 6Wunderkinder)

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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
13 Antworten
  1. von Felix am 02.11.2014 (17:47 Uhr)

    Ich hatte mit dem 'vh' Property eine zeitlang Probleme in Safari für iOS7, sodass ich die Seite erst neuladen musste bis diese Eigenschaft korrekt umgesetzt wurde. Ansonsten ist es echt ein cooles Feature..

    Wenn man irgendwelche Höhen von Sections 'berechnen' muss, bietet sich auch 'calc()' an - der Support ist imho vollkommen in Ordnung (http://caniuse.com/#search=calc) und man kann interessante Dinge mit machen :)

    Antworten Teilen
    • von Henry am 03.11.2014 (10:39 Uhr)

      Wer Höhen berechnen muss hat CSS glaube nicht richtig verstanden...

      Antworten Teilen
      • von Günter am 03.11.2014 (11:55 Uhr)

        Nunja..ich erläuter mal kurz ein kleines Beispiel, bei welchem ich das calc() bisher benötigt habe:

        Du willst eine Section-Fullscreen darstellen, aber hast oben ein 100px hohes Menü, static! Klar, dank Flexbox lässt sich das inzwischen gut regeln, aber ein kleines calc(100% - 100px) ist da wesentlich entspannter als bspw. die Flexbox-Variante mit dutzenden vendor prexfixes.

        Gibt, wie für beinahe alles, natürlich irgendwelche works arounds aber in manchen Situation hat calc() schon Vorteile. Es ist sicher keine Funktion, welche tag täglich zum Einsatz kommt, aber nunja..

        Teilen
      • von Bastey am 04.11.2014 (13:01 Uhr)

        Interface is for users.

        Und es muss irgendwie funktionieren. Mit calc haben wir mehr Support als mit anderen pure CSS Funktionen, wobei der Viewpoint-Ansatz natürlich um ein vielfaches schöner ist.

        Teilen
  2. von Michael Gerstmann am 02.11.2014 (21:48 Uhr)

    Ich bin mir relativ sicher das vw/vh schon seit über drei Jahren in einigen Browsern funktionieren, sprich mindestens 2011. Wäre schön gewesen auf das Renderverhalten und die Bugs einzugehen.

    Antworten Teilen
  3. von Lydia am 03.11.2014 (08:59 Uhr)

    Leider ist es wirklich zu schön, um wahr zu sein. Auf Android 4.4.2 getestet, drei Browser, (immerhin nur) zwei unterschiedliche Verhalten. Zum Testaufbau: vier divs, als inline-block in zwei Spalten und zwei Reihen dargestellt, position absolute, width und height entsprechend angepasst.
    Android Internet Browser: worst-case, stapelt alle divs übereinander, beachtet nicht die angegebenen Größen.
    Firefox und Chrome: Verhalten wie erwartet/erhofft, alle vier divs werden genau richtig positioniert.
    Neuer Testversuch unter Android Internet Browser: Alle divs bis auf den einen raus, Breite wie Höhe auf 100 (vw/vh). Keine Besserung, sowohl die Breite als auch die Höhe werden mißachtet (beides sowohl mit 100 als auch mit anderen Werten getestet).
    Fazit: Wenn das Wörtchen "wenn" nicht wäre ... wäre die Lösung wirklich schön

    Antworten Teilen
  4. von Michael Gerstmann am 03.11.2014 (09:27 Uhr)

    @Lydia vh/vw funktioniert unter Android erst ab 4.4, Generell gibt es auch noch ein paar iOS Bugs.

    Antworten Teilen
    • von wefewfwe am 03.11.2014 (12:28 Uhr)

      Also funktioniert es prinzipiell unter Android gar nicht....

      Antworten Teilen
      • von Michael Gerstmann am 03.11.2014 (12:34 Uhr)

        Naja wenn man sich die Benutzerstats für Android in Deutschland und Weltweit anschaut sollte man zumindestens ein Fallback einbauen oder halt mit dem Produktiveinsatz warten. Da sich >4.4 und <4.4 bei Android die Waage hält.

        Teilen
  5. von dkr am 03.11.2014 (22:10 Uhr)

    Testet doch mal:
    html,body,body>header{height:100%}
    Tut doch auch, oder?

    Antworten Teilen
  6. von Nio.t am 03.11.2014 (23:37 Uhr)

    Nervig wird es erst, wenn man in eine Sektion nen Bild mit 100% Breite haben möchte... ;)
    Wobei ich das mit vh mal ausprobieren muss, das wäre natürlich cool, wenn das klappt...

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema CSS
Marksheet: Ausgesprochen hübsche Tutorials zu HTML, CSS und Sass
Marksheet: Ausgesprochen hübsche Tutorials zu HTML, CSS und Sass

Marksheet ist eine kostenlose Tutorialsammlung zu den Themen HTML, CSS und Sass, mit einem kleinen Abstecher zu grundlegenden Webtechnologien wie HTTP. MarkSheet ist gestalterisch auf der Höhe der … » weiterlesen

Flex Layout Attribute: Schneller Designhelfer für CSS Flexbox
Flex Layout Attribute: Schneller Designhelfer für CSS Flexbox

Wer sich einmal mit CSS Flexbox beschäftigt hat, kehrt nur unter Murren und Knurren zum konventionellen Box-Modell zurück. Die Flexibilität, die Flexbox bietet, kommt zum Preis der nicht völlig … » weiterlesen

Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder
Redundant und riesengroß: CSS Purge zeigt die schlimmsten CSS-Sünder

Im besten Fall sorgen CSS für kompaktes und gekapseltes Styling für Webseiten. Im Schlimmsten Fall wird CSS zur Hölle in Sachen Übersichtlichkeit und Redundanz. CSS Purge zeigt, welche Seiten die … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?