Anzeige
Anzeige
Listicle

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.

Von Andrew Ckor
3 Min.
Artikel merken
Anzeige
Anzeige

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

Anzeige
Anzeige

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.

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

Anzeige
Anzeige
(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 …

Anzeige
Anzeige
(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 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 …

Anzeige
Anzeige

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

Anzeige
Anzeige

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:

Anzeige
Anzeige

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

Anzeige
Anzeige

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.

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

Fast fertig!

Bitte klicke auf den Link in der Bestätigungsmail, um deine Anmeldung abzuschließen.

Du willst noch weitere Infos zum Newsletter? Jetzt mehr erfahren

Anzeige
Anzeige
Kommentare (14)

Community-Richtlinien

Felix

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 :)

Henry

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

Günter

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

nazeK

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.

Michael Gerstmann

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.

Lydia

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

Michael Gerstmann

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

wefewfwe

Also funktioniert es prinzipiell unter Android gar nicht….

Michael Gerstmann

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.

dkr

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

Nio.t

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…

gergergergerg

section {
display: block;
}

done.

nazeK

Wieso das? Wir haben doch ‚cover‘.

Bitte schalte deinen Adblocker für t3n.de aus!
Hallo und herzlich willkommen bei t3n!

Bitte schalte deinen Adblocker für t3n.de aus, um diesen Artikel zu lesen.

Wir sind ein unabhängiger Publisher mit einem Team von mehr als 75 fantastischen Menschen, aber ohne riesigen Konzern im Rücken. Banner und ähnliche Werbemittel sind für unsere Finanzierung sehr wichtig.

Schon jetzt und im Namen der gesamten t3n-Crew: vielen Dank für deine Unterstützung! 🙌

Deine t3n-Crew

Anleitung zur Deaktivierung
Artikel merken

Bitte melde dich an, um diesen Artikel in deiner persönlichen Merkliste auf t3n zu speichern.

Jetzt registrieren und merken

Du hast schon einen t3n-Account? Hier anmelden

oder
Auf Mastodon teilen

Gib die URL deiner Mastodon-Instanz ein, um den Artikel zu teilen.

Community-Richtlinien

Wir freuen uns über kontroverse Diskussionen, die gerne auch mal hitzig geführt werden dürfen. Beleidigende, grob anstößige, rassistische und strafrechtlich relevante Äußerungen und Beiträge tolerieren wir nicht. Bitte achte darauf, dass du keine Texte veröffentlichst, für die du keine ausdrückliche Erlaubnis des Urhebers hast. Ebenfalls nicht erlaubt ist der Missbrauch der Webangebote unter t3n.de als Werbeplattform. Die Nennung von Produktnamen, Herstellern, Dienstleistern und Websites ist nur dann zulässig, wenn damit nicht vorrangig der Zweck der Werbung verfolgt wird. Wir behalten uns vor, Beiträge, die diese Regeln verletzen, zu löschen und Accounts zeitweilig oder auf Dauer zu sperren.

Trotz all dieser notwendigen Regeln: Diskutiere kontrovers, sage anderen deine Meinung, trage mit weiterführenden Informationen zum Wissensaustausch bei, aber bleibe dabei fair und respektiere die Meinung anderer. Wir wünschen Dir viel Spaß mit den Webangeboten von t3n und freuen uns auf spannende Beiträge.

Dein t3n-Team

Kommentar abgeben

Melde dich an, um Kommentare schreiben und mit anderen Leser:innen und unseren Autor:innen diskutieren zu können.

Anmelden und kommentieren

Du hast noch keinen t3n-Account? Hier registrieren

Anzeige
Anzeige