Sticky footers

Ein "Sticky Footer"-Muster ist eines, bei dem der Footer Ihrer Seite am unteren Rand des Ansichtsfensters "haftet", wenn der Inhalt kürzer als die Ansichtsfensterhöhe ist. In diesem Rezept werden wir uns einige Techniken zur Erstellung eines solchen Musters ansehen.

Ein Sticky Footer, der an den unteren Rand einer Box gedrückt wird

Anforderungen

Das "Sticky Footer"-Muster muss die folgenden Anforderungen erfüllen:

  • Footer bleibt unten im Ansichtsfenster, wenn der Inhalt kurz ist.
  • Wenn der Seiteninhalt über den unteren Rand des Ansichtsfensters hinausgeht, wird der Footer unter dem Inhalt wie gewohnt angezeigt.

Das Rezept

Um sich den Code anzusehen, können Sie das vollständige Beispiel herunterladen.

Hinweis: In diesem Beispiel und dem folgenden verwenden wir einen Wrapper, der auf min-height: 100% gesetzt ist. Sie können dies auch für eine ganze Seite erreichen, indem Sie eine min-height von 100vh auf das <body> setzen und es dann als Ihren Grid-Container verwenden.

Getroffene Entscheidungen

Im obigen Beispiel erreichen wir den Sticky Footer mit dem CSS Grid Layout. Der .wrapper hat eine Mindesthöhe von 100%, was bedeutet, dass er so hoch ist wie der Container, in dem er sich befindet. Dann erstellen wir ein einspaltiges Grid-Layout mit drei Zeilen, eine Zeile für jeden Teil unseres Layouts.

Grid-Auto-Placement platziert unsere Elemente in der Reihenfolge der Quelle, sodass der Header in die erste automatisch dimensionierte Spur geht, der Hauptinhalt in die 1fr Spur und der Footer in die letzte automatisch dimensionierte Spur. Die 1fr Spur nimmt den gesamten verfügbaren Platz ein und wächst somit, um die Lücke zu füllen.

Alternative Methode

Sie können auch Flexbox verwenden, um einen Sticky Footer zu erstellen.

Das Flexbox-Beispiel beginnt auf dieselbe Weise, wir verwenden jedoch display:flex anstelle von display:grid auf dem .wrapper; wir setzen auch flex-direction auf column. Dann setzen wir unseren Hauptinhalt auf flex-grow: 1 und die beiden anderen Elemente auf flex-shrink: 0 — dies verhindert, dass sie kleiner werden, wenn der Inhalt den Hauptbereich füllt.

Ressourcen auf MDN