Sticky Footer

Mit Sticky Footer bezeichnet man das Verhalten des Footers auf einer Webseite. Dabei ist erwünscht, dass der Footer am unteren Bildschirmrand „klebt“ auch wenn der Inhalt der Seite weniger hoch ist als der Viewport.

Mit Flexbox könnt ihr in wenigen Schritten einen responsive Sticky Footer erstellen. 

Ohne Sticky Footer:

See the Pen Non Sticky Footer by phuc (@phuc) on CodePen.

Mit Sticky Footer:

See the Pen Sticky Footer by phuc (@phuc) on CodePen.

Warum solltet ihr das implementieren?

Wenn der Inhalt der Seite stets größer ist als das Browserfenster (Scrollbalken sichtbar), müsst Ihr Euch keine Sorgen um den Sticky Footer machen. Sollte der Inhalt aber tatsächlich mal kompakt sein, kann Eure Webseite sehr komisch aussehen, wenn die Seite nicht mit dem Footer abschließt.

Was kann schlimmstenfalls passieren?

Mit dieser Methode der Sticky Footer Implementation wird vorausgesetzt, dass der Browser die CSS Eigenschaft Flexbox kennt. Sollte jemand die Webseite mit einem Älteren Browser wie dem Internet Explorer 9 ansehen, greift der Sticky Footer schlimmstenfalls einfach nicht. Ein tolles Beispiel für Progressive Enhancement. Die Funktionalität der Seite wird für ältere Browser nicht eingeschränkt und moderne Browser werden um einen full responsive Sticky Footer erweitert.

Sticky Footer mit display Grid

Für wen das immer noch zu viel code ist, kann auch gerne mit display grid arbeiten. Allerdings unterstützen weniger Browser diese Methode.

See the Pen Sticky Footer with display grid by phuc (@phuc) on CodePen.

Stichwörter: , ,

Kategorisiert in: