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 .site 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 kennt.

.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 Body-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 gebracht – also 100% der Höhe des Browserfensters („viewport height“). Wenn man angemeldet ist (.logged-in) fällt die verfügbare Höhe um 32 Pixel geringer aus, da die schwarze Admin-Bar oben mit einer Höhe von 32px eingeblendet wird. Mit Hilfe von calc ziehen wir für den Fall „logged-in“ also 32 Pixel der Gesamthöhe wieder ab.

Außerdem ist noch zu beachten, dass es zum Beispiel im Starter-Theme „_underscores“ bei den Elementen .post und -page einen Bottom-Margin von 1.5em gibt. Dieser müsste für einen ’sauberen‘ Sticky-Footer auch noch zunächst auf „0“ desetzt werden:

.post,
.page {
margin: 0;
}