foto von alicia perez, unsplash
white and pink flowers in black leather case
foto von alicia perez, unsplash

Site-Footer soll am unteren Fensterrand abschließen, aber nicht sticky sein

von

|

am

|

unter

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.

weitere Beiträge zu:

Bitte Kommentarfunktion nicht für Supportanfragen nutzen. Dem kann hier nicht entsprochen werden. Die Angabe einer E-Mail-Adresse und eines Namens ist nicht erforderlich. Einen (Spitz)-Namen zu nennen wäre aber doch nett.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.

Hinweis: Sowohl angegebener Name als auch E-Mail-Adresse (beides ist optional, dafür werden alle Kommentare vor Veröffentlichung geprüft) werden dauerhaft gespeichert. Du kannst jeder Zeit die Löschung Deiner Daten oder / und Kommentare einfordern, direkt über dieses Formular (wird nicht veröffentlicht, und im Anschluss gelöscht), und ich werde das umgehend erledigen. – Mit hinterlassenen Kommentaren hinterlegte IP-Adressen werden nach zwei Monaten automatisch gelöscht

publicly queryable