Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

So erhalten Sie Zugriff auf diesen Kurs

Werden Sie noch heute Mitglied und erhalten Sie Zugriff auf mehr als 23.200 Kurse von Branchenfachleuten.

Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren

Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren

Aus dem Kurs: Webtechniken lernen 3: Responsive CSS-Layouts mit Media Queries, Flexbox und Grid

Gratismonat starten Für Ihr Team erwerben

Sticky Footer: Den Fußbereich mit flex: 1 am unteren Rand des Viewports platzieren

“

Ich möchte Ihnen jetzt ein Praxis-Beispiel zeigen, Flexbox in Aktion, sozusagen, wie man mit dieser Zauberformel flex: 1 sehr einfach bestimmte Dinge erreichen kann. Sie sehen hier die Seite "Über uns", und die ist ein bisschen zu kurz für diesen Viewport, so dass der Footer hier quasi fast Mitten auf den Seite steht. Ich möchte jetzt erreichen, dass der auch auf zu kurzen Seiten, hier unten am unteren Rande des Viewports platziert wird. Und das machen wir jetzt mit Hilfe von Flexbox. Ich habe body markiert, und ich sehe hier, body definiert in Layout CSS in Zeile 27, und dort an dieser Stelle werde ich jetzt body zur Flexbox machen, zum Flex-Container. Bitte, erschrecken Sie nicht, denn es ist noch nicht ganz so, wie man sich das vorstellt. An dieser Stelle sind Flexbox-Einsteiger meistens etwas verwirrt und sagen, was soll denn daran so toll sein? Aber das ist der Standardverhalten von Flexbox. display-flex erzeugt einen Flex-Container, und alle Flex-Items, also das sind jetzt die 4…

Inhalt