Bei einer Webseite soll die Fusszeile unten kleben bleiben. Wir gelangen in den Bereich position:absolute… Das wiederum bedingt, dass definiert wird, dass die Seite 100% hoch ist.
soweit-sogut.
Als beim Testen der Seite alles nach „yes – es funktioniert“ aussieht, stellt sich heraus, dass auf einem iPad (IOS) und mit Safari als Browser die Höhenberechnung anders funktioniert, als auf andern Devices / mit andern Browsern.
Safari unter IOS/iPad lässt sich aber zum Glück übertölpeln…
hier ausschnittsweise ein paar CSS-Schjpsel dazu:
/* für footer an bottom kleben */
* { box-sizing: border-box; } *:before, *:after {
box-sizing: border-box;}
html, body {
height: 100vh; /* 100% */
height: -webkit-calc(100% - 0px); /* wegen safari-ios ... */
position: relative; }
/* Footer definitionen */
footer#colophon {
max-width: 100%;
background-color: white;
margin: auto 0;
border-top: none; /* für footer bottom problem */
position: absolute;
bottom: 0;
width: 100%; }
Selbstverständlich ist oben stehender CSS-Code dem jeweiligen Layout noch anzupassen und zu ergänzen.