von 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.
|
1 2 3 4 5 |
#footer { position: absolute; bottom: 0px; width: 100%; } |
Der nächste Ansatz ist da schon besser. Hier wird mit Hilfe eines Wrappers gearbeitet, in dem sich das Content- und Footer-Div befinden:
|
1 2 3 4 5 6 7 |
<div id="wrapper"> <div id="content"> ... </div> <div id="footer"> ... </div> </div> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
html, body { height: 100%; } #wrapper { position: relative; min-height: 100%; height: auto !important; height: 100%; } #content { padding-bottom: 100 px; // height of footer must be specified as padding of the content-div } #footer { position: absolute; bottom: 0; width: 100%; } |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<body> <!-- BEGINNING OF WRAPPER_OUTER --> <div id="wrapper_outer"> <!-- BEGINNING OF HEADER --> <header id="header-menu" class="navbar-fixed-top navbar-sticky bs-docs-nav" role="banner"> ... </header> <!-- ENDING OF HEADER --> <!-- BEGINNING OF WRAPPER --> <div id="wrapper"> <!-- BEGINNING OF CONTENT --> <div id="content" class="container-fluid"> ... </div> <!-- ENDING OF CONTENT --> </div> <!-- ENDING OF WRAPPER --> </div> <!-- ENDING OF WRAPPER OUTER --> <!-- BEGINNING OF FOOTER --> <footer class="footer"> <div class="container-fluid"> ... </div> </footer> <!-- ENDING OF FOOTER --> ... </body> |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
html { position: relative; /* relative positioning to help positioning the footer */ min-height: 100%; /* set min-height to help positioning the footer */ } body { margin-bottom: 100px; /* height of the footer must be specified as margin */ } .footer { position: absolute; bottom: 0; width: 100%; } |
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.
