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.