Responsive Flexbox-Layouts für Fortgeschrittene

Flexbox in Aktion: Sticky Footer

Testen Sie unsere 1890 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Der Footer wird per Flexbox überredet, auf kurzen Seiten ganz unten im Browser-Fenster zu bleiben und ansonsten unterhalb des Inhalts zu erscheinen.

Transkript

Der Fußbereich einer Webseite heißt so, weil er meistens unten steht, so steht es hier auch, der Footer erscheint meist unten auf der Seite, deshalb heißt er auch Footer. Das ist bei dieser Seite auch sehr schön zu sehen, aber was passiert, wenn der Inhalt etwas kürzer ist? Ich habe hier die Seite im Editor geöffnet und um das zu demonstrieren, werde ich jetzt hier einen großen Teil dieses Artikels auskommentieren, so dass nur der erste Absatz bleibt und ich lade jetzt neu im Browser und Sie sehen, dann hat der Footer seinen Namen nur noch zum Teil zu Recht. Er erscheint zwar unterhalb des Inhalts, aber nicht mehr unten im Browserfenster, da unten erscheint hier noch ein anderer Bereich. Schöner wäre es, wenn der unten bliebe und die Sidebar und der Hauptinhaltsbereich bis zum Footer herunterreichen und wenn mehr Inhalt vorhanden ist, dass er dann unterhalb des Inhalts bleibt und am Anfang erst mal nicht zu sehen ist. Dieses Verhalten bezeichnet man auch als Sticky-Footer und das möchte ich Ihnen jetzt zeigen, wie das geht, weil das geht mit Flexbox recht simpel. <div class="outer-wrap" ist das <div, das um die ganze Seite herum geht und dieses ist ein Flex-Container. Das machen wir uns jetzt zu Nutze. Gleich aber zuerst einmal definiere ich eine Mindesthöhe für diesen Container und sage: Du sollst mindestens so hoch sein, wie der Viewport. 100vh (viewport-height Einheiten), 1 Viewport-height ist 1% des Browserfensters in der Höhe des Viewports, genau genommen, 100 sind also 100% Viewport-Höhe. Das ist die Mindesthöhe. Jetzt muss ich eigentlich nur noch einem dieser Bereiche sagen und zwar diesem hier in der Mitte, dass er den zur Verfügung stehenden Platz nutzen soll. Er soll also wachsen. Das ist Content, "div.content", der Wraper hier und der bekommt jetzt gesagt: "flex: 1 1 auto;" also flex-grow 1, flex-shrink 1 und flex-basis lassen wir auf auto, flex-grow 1, diese 1 ist das Geheimnis, damit wird gesagt: Lieber Container, falls Platz ist, darfst du wachsen. Ich lade neu und Sie sehen, der Footer erscheint meist unten auf der Seite, deshalb heißt er auch Footer. Die Sidebar reicht herunter bis hier, weil Content wachsen darf. Content ist der Wrapper der um den Inhaltsbereich, um die Sidebar herum geht. Und jetzt wird es spannend, was passiert wenn mehr Inhalt vorhanden ist? Also, wenn ich jetzt diesen Text wieder auskommentiere hier, aus-aus-kommentiere, also wieder einkommentiere und so, dass der wieder sichtbar wird in jedem Fall, gespeichert ist, rüber in den Browser, neu laden und Sie sehen, der Footer erscheint unterhalb des Inhaltes, bleibt also ganz unten, da wo er hingehört. Mit zwei CSS-Anweisungen, von denen streng genommen nur eine wirklich Flexbox ist, einmal gebe ich eine Mindesthöhe vor, für den Wrapper drumrum und dann sage ich dem Content-Bereich, dem 'div' um den Inhaltsbereich drumrum, du darfst wachsen und schon haben wir einen Sticky-Footer.

Responsive Flexbox-Layouts für Fortgeschrittene

Sehen Sie, wie sich mit Flexbox die Art und Weise der Webseitengestaltung grundlegend verändern wird und wie Sie die TEchnologie schon heute einsetzen können.

2 Std. 25 min (34 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Software:
Exklusiv für Abo-Kunden
Erscheinungsdatum:18.10.2016
Laufzeit:2 Std. 25 min (34 Videos)

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!