Bei Seiten mit weniger Inhalt, als Platz da ist, will man häufig den Footer an die untere Browserkante ‚kleben‘ – also einen sogn. Sticky Footer per CSS im Stylesheet einbauen. Das lässt sich mit ein paar Zeilen CSS-Code bewerkstelligen.
Hier zunächst eine allgemeine Lösung die davon ausgeht, dass die Elemente mit den Klassen .sie und .site-footer nebeneinander bzw. auf derselben Ebene liegen.
Sticky Footer
/* -- sticky footer -- */ html, body { height: 100%; } body { display: flex; flex-direction: column; } .site { flex: 1 0 auto; /* overflow-x: hidden; */ } .site-footer { flex-shrink: 0; }
Sticky Footer in WordPress
In den meisten WordPRess-Themes ist das Seitelayout ein wenig anders aufgebaut – das Element mit der Klasse .site ist häufig der Container, in dem der Header (site-header), der Body (site-main) und der Footer (site-footer) eingeschlossen sind.
Hier der Sticky-Footer.Code, der in den meisten WordPress-Themes funktioniert und vor allem auch mit dem Starter-Theme underscore _s kompatibel sein sollte. Hier wird allerdings der Body-Bereich mit der Klasse site-main auf die volle Höhe, abzüglich des Header gebracht. Das ist nur dann praktisch, wenn man die Hähe des Headers weiß.
.site { display: flex; flex-direction: column; } .site-main { min-height: calc( 100vh - 5.9rem ); }
Hier nun eine Version des CSS-Code-Snippets, die über flex-grow den Bidy-Bereich mit der Klasse site-main nur genau so weit streckt, wie gerade Platz ist. Der Footer-Bereich mit der Klasse site-footer kann eine fixe Höhe haben und wird dank flex-shrink: 0 nicht gestaucht.
/* -- sticky footer -- */ .site { display: flex; flex-direction: column; min-height: 100vh; } .logged-in .site { min-height: calc( 100vh - 32px ); } .site-main { flex: 1 0 auto; } .site-footer { flex-shrink: 0; }
Die Seite wird über die Klasse .site auf die volle Höhe bzw. Midesthöhe 100vh des Browserfensters gebracht. Wenn man angemeldet ist (.logged-in) wird die schwarze Admin-Bar oben mit einer Höhe von 32px mit Hilfe von calc von der gesamthöhe abgezogen.