Früher … Als man noch Tabellen benutzte um Internetseiten zu erstellen, war es an der Tagesordnung, dass eine Seite die volle Browserhöhe einnahm, und die Fußzeile es sich am unteren Bildrand bequem machte. Möglich war dies mittels <table height="100%"> und valign="bottom".
Seit CSS ist dies nicht mehr so ohne weiteres möglich, da es keine direkte Möglichkeit gibt ein Element in einem anderen unten-bündig auszurichten. Zwar existiert die Eigenschaft vertical-align: bottom;, dieses ist allerdings nur auf Text in inline-Elementen (also etwa <span><a><label> …) anwendbar. Um beispielsweise ein <div> unten bündig zu bekommen, bedarf es da schon einiger kleinerer Tricks.
Die Methode welche ich hier vorstelle, würde ich nicht als die semantisch Korrekteste bezeichnen, funktionierte bei meinen Tests jedoch in allen gängigen Browsern der neuen Generation – und auch im Internet Explorer 6 nahezu fehlerfrei. Lediglich Opera 8 hatte seine Problemchen beim Skalieren des Browserfensters. Hier musste die Seite nach dem Skalieren neu geladen werden. Ein Fehler über den man denke ich hinwegsehen kann.
Um 100 % Höhe und eine am unteren Browserrand positionierte Fußzeile zu ermöglichen, müssen zunächst einige Grundvoraussetzungen gegeben sein:
für die Elemente <html>, und <body> muss eine Höhe von 100% deklariert werden, da das <div> in welchem sich später die Fußzeile befindet sich auf die volle Höhe ausbreiten kann. Das <body>-Element muss zusätzlich ein margin: 0; (für IE, Firefox und Co) und ein padding: 0; (für Opera) erhalten, da der browserseitige Rand zur 100 % Höhenangabe dazugerechnet würde:
html, body {
height: 100%;
}
body {
margin: 0; padding: 0;
} |
html, body {
height: 100%;
}
body {
margin: 0; padding: 0;
}
Soweit so ungewöhnlich. Kommen wir zum Markup:
Zunächst benötigen wir ein <div> in welches wir später die Fußzeile packen. Die Breite dieses divs kann variabel sein, der Wert für die Höhenangabe muss jedoch <em>mindestens 100%</em> betragen. Entscheidend dafür, dass wir innerhalb des #wrapper-div ein Element absolut nach unten ausrichten können, ist die Angabe einer Positionierungsart:
<div id="wrapper"></div>
#wrapper {min-height: 100%; position: relative;}
Da der Internet Explorer min-height nicht interpretiert, deklarieren wir für diesen nach den obigen Angaben zusätzlich:
* html #wrapper {height: 100%;}
Nun können wir innerhalb des Seiten-umschließenden divs die Fußzeile einfügen. Diese kann frei innerhalb des #wrapper platziert werden, am nahe liegendsten ist jedoch natürlich unten:
<div id="wrapper">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.
<div id="footer">
Erdgeschoss
</div>
</div> |
<div id="wrapper">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.
<div id="footer">
Erdgeschoss
</div>
</div>
Testen wir dies, sehen wir (Livedemo 1), dass sich die Fußzeile nun zwar logischerweise unter dem Text befindet, jedoch nicht am unteren Bildschirmrand. Jetzt kommt das zweite Mal die Eigenschaft position zum Zuge: Wir positionieren die Fußzeile absolut am unteren Nullpunkt des sichtbaren Seitenbereiches (Viewport):
#footer {position: absolute; bottom: 0; left; 0;} – Schwupps: Text, darunter Fußzeile die sich am unteren Bildschirmrand befindet. Haben wir also schon fast das gewünschte Ergebnis.
Fast? Ja, zum Einen nimmt die Fußzeile nun nicht mehr die volle Breite des Eltern-Elements (hier: #wrapper) an. Das können wir ganz einfach lösen mittels #footer {width: 100%;} .
Zum Anderen wird es problematisch, wenn der Text länger wird als 100% der Seitenhöhe, dann nämlich, wird der Text vom Footer vom Fließtext überlagert. (Livedemo 2) Abhilfe gibt es hier auf verschiedene Wege. Sicherlich würde es bei einer einzeiligen Fußzeile fürs erste reichen, ein <br /> ans Ende des Textes zu setzen. Nur was tun, wenn die Fußzeile dann von einer, auf zwei Zeilen erweitert wird, oder ein padding bekommt?. <br /><br /> ? Pfui!
Ich habe mich für die Variante entschieden, bei dem ich den Text in einen weiteren Container packe, welchen ich mit einem margin-bottom versehe. Dies sähe in diesem konkreten Fall dann so aus:
<div id="wrapper">
<div id="content">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.
</div>
<br style="clear: left;" />
<div id="footer">
Erdgeschoss
</div>
</div> |
<div id="wrapper">
<div id="content">
Lorem Ipsum is simply dummy text of the printing
and typesetting industry. Lorem Ipsum has been
the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley
of type and scrambled it to make a type specimen book.
</div>
<br style="clear: left;" />
<div id="footer">
Erdgeschoss
</div>
</div>
#content {margin-bottom: 1.5em; float: left;}
So bleibt der Inhalt stets x[=Wert für margin-bottom] — y[=Höhe Fußzeile] von der Fußzeile entfernt.
Wer sich das ganze einmal in Live anschauen möchte, der klickt ein wenig hier im Weblog herum, oder schaut sich die finale Demo an.
Jetzt abonnieren!