sven.vonarx

Der Grossteil der Webseiten hat heute einen Footer. Dieser wird meistens verwendet um Adressdaten zu präsentieren oder für Links zu den AGB’s, Impressum, etc.

Da aber die Auflösung und die Grösse der Monitore immer mehr wächst, kann die Situation eintreten, dass die Höhe der Webseite geringer ist, als die des Monitors. So entsteht unten eine weisse Fläche ohne Inhalt. Dies sieht nicht besonders schön aus und kann durch eine einfache Anpassung behoben werden.

Im base.php direkt nach dem-Tag ein Holder-Div einfügen mit der Klasse „holder“.

<body <?php body_class(); ?>>
    <div class="holder">
        .....
    </div>
</body>

Danach in der app.css die entsprechenden Stylings einfügen.

Folgende Stylings sind nötig:

/* ===============   Sticky Footer    ================ */  

html, body { height: 100% } 
.holder { min-height: 100%; position:relative; } 
.wrap { padding-bottom: 100px; }
footer.content-info { bottom: 0; height: 100px; left: 0; position: absolute; right: 0; }

Da der Footer nun absolut positioniert ist, wird er sich dem Wrapper (.wrap) überlappen. Darum ist hier ein padding-bottom mit der Angabe der Footerhöhe nötig.

7 responses to “Sticky Footer im Roots-Theme für WordPress

  1. Hallo Sven,

    ich habe genau dieses Footer-Problem. Siehe Foto:

    https://www.bilder-upload.eu/bild-28cf56-1605354428.jpg.html

    Bin noch ein Newbie, erst seit Anfang Juli 2020 mit WP angefangen um ehrenamtlich die Sportseite des Caputher SV zu redesignen. Und ich arbeite mit WP.5.4, lokal mit XAMPP. Was ist die base.php?

    Ich möchte die Fußzeile immer am Ende der Seite bzw. am unteren Ende des Viewports positionieren.

    Danke für deine Mühe im Voraus.

    Grüße aus Caputh, Andreas
    AndreasRoe@web.de

Schreibe einen Kommentar

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

Lust auf mehr?

Freie Auffahrtstage

Fabienne Mast
Liebe Besucherin, lieber Besucher Unser Büro ist über …
Blogbeitrag ansehen
Gesicht mit UX Design Post-it auf der Stirn
UX

UX Irrtümer Teil 2 – Mach mal UX Design!

Dominik Schendl
Wie im letzten Artikel versprochen, geht es heute …
Blogbeitrag ansehen
Gesicht mit UX Design Post-it auf der Stirn
UX

UX Irrtümer Teil 1 – Design ist nicht Design

Dominik Schendl
Ich bin UX Designer. Wer nicht weiss, was …
Blogbeitrag ansehen

Über Pfingsten geschlossen

Fabienne Mast
Liebe Besucherin, lieber Besucher Unser Büro ist über …
Blogbeitrag ansehen