Ankerlink an den Anfang der Seite
foto von alicia perez
Generic filters
Filter by Kategorien

Grundsätzlich lässt sich die Anforderung ohne Javascript lösen. Allerdings kann es tüftelig werden, je nach Struktur des Layouts. Im Anwendungsfall ging es allerdings ganz einfach, da es einen Hauptcontainer gab, unter dem direkt die drei Hauptsektionen des Layouts kamen, die jeweils 100% breit waren. An die Definition der Inhaltsbreiten ging es dann erst eine weitere Ebene darunter.

<div class="wp-site-blocks">
    <header class="site-header wp-block-template-part">
        <div class="wp-container..."></div>
    </header>
    <main class="wp-container-...">
        <div class="wp-container..."></div>
    </main>
    <footer class="site-footer wp-block-template-part">
        <div class="wp-container..."></div>
    </footer>
</div>

Gesetzt dem Fall, es sind farbige oder mit Bildern hinterlegte Inhaltsabschnitte vorgesehen, sodass der Footer immer unmittelbar nach dem Inhalt enden soll, sich dafür jedoch der Footer-Hintergrund bis an den unteren Rand der Seiten durchziehen, wäre der Footer das Element, das sich in der Höhe ausdehnen soll, bis 100% Gesamthöhe erreicht sind.

.wp-site-blocks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* WordPress spezifisch */
.admin-bar .wp-site-blocks {
    min-height: calc(100vh - 32px);
}

/* der Footer-Hintergrund setzt sich nach unten hin fort */
.wp-site-blocks>.site-footer {
    flex: 1;
    /* ggf. noch hintergrundfarbe geben, 
     * da diese erst über den container definiert sein dürfte
     */
    background: var(--wp--preset--color--primary);
}

Bei einem neutralen Inhaltshintergrund kann es der Hauptinhaltsbereich sein, der sich streckt, sodass der Footer in jedem Fall seine Höhe behält, während der nicht befüllte Inhaltsbereich einfach leer bleibt.

.wp-site-blocks {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* WordPress spezifisch */
.admin-bar .wp-site-blocks {
    min-height: calc(100vh - 32px);
}

/* der Inhaltsbereich dehnt sich und hält so den Site Footer unten */
.wp-site-blocks>main {
    flex: 1;
}
footer flex eins
Footer dehnt sich
main flex eins
Hauptbereich dehnt sich

Ist eine Seite ohnedies höher als das Browserfenster, bleibt alles wie gehabt. Allerdings ist eine gründliche Prüfung sinnvoll, vor allem bei Block-Themes mit womöglich unterschiedlichen Template-Strukturen.

Eine Antwort zu „Site-Footer soll mindestens am unteren Fensterrand abschließen, aber nicht sticky sein“

  1. Matthias

    Hallo Webentwicklerin,

    vielen Dank für diesen Artikel. Genau das, was ich gesucht habe. War schon am Verzweifeln, denn die Suchergebnisse für „Footer immer unten“ liefen meist auf einen Sticky Footer hinaus oder waren über 10 Jahre alt und beschrieben dadurch CSS-technisch nicht mehr zeitgemäße Lösungen.

Bitte das Kommentarfeld nicht für Supportanfragen nutzen; hier kann kein Support angeboten werden. Die Angabe von Name oder E-Mail-Adresse ist optional, ein Spitzname wäre trotzdem nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Hinweis: Name und E-Mail-Adresse (beides optional, da alle Kommentare moderiert werden) werden dauerhaft gespeichert. Über dieses Formular kann jeder Zeit die Löschung persönlicher Daten oder Kommentare angefordert werden; die Anfrage wird nicht veröffentlicht und nach der Bearbeitung gelöscht. IP-Adressen, die mit Kommentaren gespeichert werden, werden nach zwei Monaten automatisch gelöscht.