MDXDave.de
IT-Freelancer // Android + Coding
IT-Freelancer // Android + Coding
Es gibt gefühlt drei Millionen Seiten bzw. Tutorials oder Code-Schnippsel, mit welchen ihr einen Sticky-Footer (also einen Footer, der bei zu wenig Content unten am Bildschirmrand klebt, bei mehr Inhalt allerdings am Ende dieses Inhaltes steht) realisieren könnt.
Ich persönlich bin jedoch von den meisten "Lösungen" frustriert, da diese entweder nicht richtig funktionieren, oder andere Probleme verursachen.
Für eine Webseite brauchte ich jetzt wieder einmal einen und stieß dabei auf eine ganz simple Möglichkeit:
Folgendes Grundgerüst:
MDXDave.de
<html>
<body>
<main>
Hier ist der Inhalt
</main>
<footer>
Euer toller Footer
</footer>
</body>
</html>
Und hier der CSS-Code dazu:
* {
margin: 0;
padding: 0;
}
html {
position: relative;
min-height: 100%;
}
body {
/* Margin-Bottom wie Footer Höhe */
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
color: #fff;
background-color: darkblue;
}
Das ganze sollte jetzt schon funktionieren: siehe Demo
Es gibt aber ein Problem: Angenommen euer Design ist Responsive, dann kann es sein, dass sich die Höhe des Footer ändert, bei kleineren Geräten. Ist dieser dann Höher, kann es passieren, dass dieser den eigentlichen Inhalt überlappt - sehr unschön.
Nun gibt es zwei Möglichkeiten, für jeden Breakpoint die Höhe des Footers statisch festlegen oder dynamisch mit Javascript lösen:
function stickyFooter(){
$("body").css("margin-bottom",$("footer").height());
}
$(window).resize(function(){
stickyFooter();
});
$(document).ready(function(){
stickyFooter();
});
Der Code ist eigentlich selbsterklärend, beim Aufrufen und beim Verändern der Größe der Seite, wird der untere Abstand unseres Body-Elements neu berechnet, damit sollte es keine Überschneidungen etc. mehr mit dem Inhalt geben :)