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;
}
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.
Schreibe einen Kommentar