Footer immer unten anordnen

14.08.2008

Footer immer unten anordnen

Wie das Wort "Footer" übersetzt schon ausdrückt, soll er sich sinnvoller Weise am "Fuß" einer Seite - unten also - anordnen.
Das tut er auch recht problemlos, indem man ihn absolut zum übergeordneten Div positioniert. Hierzu wird zunächst ein übergeordneter #wrapper relativ positioniert. Für den #wrapper selbst hat dies ohne die zusätzlichen Positionsangaben "top" und "left" keinerlei Auswirkungen. Der #footer kann jedoch Dank der Relativpositionierung des #wrapper in diesem absolut am unteren Rand positioniert werden. Vorab setzen wir mit dem Universalselektor alle Abstände auf "Null" und definieren sie, sofern benötigt wieder für die entsprechenden Elemente.
Den Inhalt schreiben wir in einen #content. Dem #footer geben wir noch eine Zeilenhöhe oder einen height-Wert. Nun müssen wir noch darauf achten, dass der #content einen unteren Abstand hat, welcher der Höhe des #footers zuzüglich dem unteren Innenabstand des #content selbst entspricht. Der CSS-Code dazu sieht wie folgt aus:

* {
margin: 0;
pading: 0;
}

p, h1 {
padding-bottom: 10px;
}

#wrapper {
position: relative;
background: #A9A9A9;
}

#content {
padding: 1em 1em 2.5em 1em;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
line-height: 1.5em;
text-align: center;
background: #8B8878;
}

HTML:

<div id="wrapper">
<div id="content">
<h1>Unten platzierter Footer</h1>
<p>Der Footer befindet sich am unteren Rand des Wrappers</p>
</div>
<div id="footer">
Footer
</div>
</div>

Sehen wir uns das Ergebnis in Demo 1 an, so ist dies zwar dem Code entsprechend, jedoch nicht so, wie sich das mancher möglicherweise vorgestellt hat.
Vielleicht hättet ihr ihn doch lieber gerne am unteren Bildschirmrand? Auch kein Problem.
Wir müssen hierzu lediglich dem "Wurzelelement" html und dem body noch einen height-Wert von 100% zuweisen, was der Höhe des "Viewports" (verfügbarer Bildschirmbereich für die Seitendarstellung) entspricht. Dem #wrapper verpassen wir noch eine Mindesthöhe von ebenfalls 100%. Damit wird der Footer nicht am Ende des Contents angeordnet, sondern wirklich ganz unten am unteren Bildschirmrand.
Arbeiten wir die zusätzlichen Angaben in die CSS-Angaben ein:

* {
margin: 0;
padding: 0;
}

html, body {
height: 100%;
}

p, h1 {
padding-bottom: 10px;
}

#wrapper {
position: relative;
min-height: 100%;
background: #A9A9A9;
}

#content {
padding: 1em 1em 2.5em 1em;
}

#footer {
position: absolute;
bottom: 0;
width: 100%;
line-height: 1.5em;
text-align: center;
background: #8B8878;
}

Das Ergebnis in Demo 2 sieht schon besser aus.
Leider jedoch nicht im Internet Explorer 6, der die Eigenschaft min-height nicht interpretieren kann (noch ältere IE-Versionen werden nicht berücksichtigt).
Da dem #wrapper somit Breite und Höhe fehlen, wird im IE 6 der Hintergrund auch nicht durchgehend angezeigt. Also benötigen wir für den Internet Explorer 6 (er ist immer noch genügend verbreitet) einmal wieder eine Spezialangabe.

Damit der #wrapper auf 100% Höhe kommt, wird für den IE 6 eingefügt:

* html #wrapper {
height: 100%;
}

Dieses Beispiel beschränkt sich auf den wesentlichen Code, damit der Footer unten angeordnet ist.
Natürlich kann man nun noch dem Wrapper eine feste Breite zuweisen, ihn zentrieren und in den Content andere Elemente wie z.B. Header, Navi und eben den eigentlichen Inhalt einfügen.
In Demo 3 wurden einige derartige Angaben eingebaut. Sie sollte in allen gängigen Browsern, einschließlich dem Internet Explorer 6 gleich dargestellt werden.

Quelle:
Dieses Thema ist weitgehend unter dem Begriff "FooterStick" bekannt und dürfte seinen Ursprung bei Alistapart haben.

nach oben