Footer unter Content am unteren Browserrand positionieren

Bei einem angepassten Bootstrap-Theme hatte ich immer das Problem, dass der von mir eingebaute Footer sich immer unmittelbar unter dem Ende des Contents befand. Dies ist zwar dem Code entsprechend korrekt gewesen, sieht allerdings wirklich scheiße aus, wenn der Content-Bereich das Fenster mal nicht ausfüllt. Der Footer hängt dann irgendwo in der Mitte des Fensters. Abhilfe kann man allerdings sogar ohne Javascript schaffen.

Anfangs habe ich die gesamte Fläche die dann bis zum unteren Rand des Browsers reicht einfach komplett in der Farbe des Footers formatiert. Das sieht aber auch nicht sehr schön aus. Leider konnte ich keine „Out Of The Box“-Lösung im Bootstrap-Universum finden, was mich schon etwas wundert. Deshalb folgt hier ein allgemeiner Lösungsansatz, der nicht an Bootstrap gebunden ist und somit in jedem Webprojekt umgesetzt werden kann.

 

Lösungsansätze

Die erste Idee war es den Footer einfach absolut zu positionieren, was recht einfach durch eine entsprechende CSS-Regel mit „position: absolute“ zu erreichen ist. Das hat aber den unschönen Effekt, dass der Footer wirklich immer zu sehen ist und Content überdeckt wenn dieser länger als das Browserfenster ist.

 

Der nächste Ansatz ist da schon besser. Hier wird mit Hilfe eines Wrappers gearbeitet, in dem sich das Content- und Footer-Div befinden:

Mittels CSS wird das html- und body-Element mit einer Höhe von 100% festgelegt, woran sich dann der Wrapper orientiert um immer auf 100% der verfügbaren Fläche gezogen zu werden:

Allerdings gefiel mir diese Lösung aufgrund des nötigen Wrappers, da meine Seite aufgrund eines Sticky-Headers bereits über Wrapper verfügt, und wegen des festzulegenden Padding-Wertes nicht. Denn dadurch muss man die Höhe des Footers kennen, was blöd ist, wenn dieser dynamisch mit Inhalt gefüllt wird.

 

Deshalb habe ich weiter rumgebastelt und fand, wenn ich mich recht erinnere, eine schon viel bessere Lösung auf Stackoverflow. Diese kommt ohne Wrapper aus und geht an die Sache anders herum ran. Es wird kein Padding unter dem Content benötigt, sondern stattdessen ein Margin von unten/außen (im Body) genutzt. Das ist etwas blöd zu beschreiben, aber sollte im folgenden Punkt klarer werden. Leider ist dafür immer noch die Höhe des Footers nötig, was mich immer noch nicht ganz glücklich macht, aber schon mal besser ist als die vorherige Lösung.

 

Finale Umsetzung

Die HTML-Struktur meiner Seite sieht, bereinigt um die meisten Bootstrap-Elemente und den ganzen Content, ungefähr so aus:

Wie man sieht, gibt es da schon eine recht unschöne Wrapper-Konstruktion, die ich vielleicht nochmal etwas verbessern kann. Der Footer befindet sich nun außerhalb des Wrappers, da dieser nicht für dessen Positionierung benötigt wird.

Die nötigen CSS-Regeln lauten nun wie folgt:

Wie bereits beschrieben geht die Schaffung des nötigen Raums für den Footer in diesem Fall vom Body, mittels margin, und nicht vom Content-Div aus, wodurch man sich den Wrapper spart. Das ist schon mal etwas sauberer und sorgt auch für eine aufgeräumtere HTML-Struktur. Damit das ganze funktioniert muss das HTML-Element als Midnesthöhe 100% bekommen und relativ positioniert sein.

 

 

Schreibe einen Kommentar