Ein Problem, dass ich schon bei etlichen Webseiten gesehen habe - auch bei meinen eigenen - ist, dass der Footer der Webseite farbig ist und auf kleinen Bildschirmen bis zum Seitenende geht - auf großen leider nicht ganz. Und dann entsteht unter dem Footer eine weiße Fläche, die nicht beabsichtigt war.
Pünktlich zu meinem Redesign hier im Blog habe ich eine Lösung dafür entwickelt.
Die Lösung
Die Lösung basiert darauf, dass man mit CSS wirklich alle Elemente einer Webseite verändern kann. So auch body und html. Mein Code sieht in diesem Fall so aus:
footer {
background: #2F2F2F; // wichtig
width: 100%;
float: left;
}
html {
background: #2F2F2F; // wichtig
}
body {
float: left;
width: 100%;
background: #FFFFFF; // wichtig
}
Was macht der Code genau?
Der Code gibt erstmal dem footer eine Hintergrundfarbe, die identisch mit der von html sein sollte. Dem body-Bereich wird ein weißer Hintergrund zugewiesen. Wenn die Seite jetzt für den Bildschirm zu kurz sein sollte, geht der weiße Hintergrund von body bis zum unteren Ende von footer. Da footer body überdeckt, hat der Bereich die Hintergrundfarbe von footer. Alles was unter dem footer zu sehen ist gehört zu html, welches die gleiche Hintergrundfarbe wie footer haben sollte, so dass der footer einfach bis unten hin weiter zu gehen scheint.
Eigentlich alles relativ einfach.
