CSS: Browserfenster-Höhe

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.