Eine Fußzeile mit CSS

Zu den Anfängen des Internets kannte man nur HTML. Alle Webseiten bestanden komplett aus HTML-Code, manchmal kam ein bisschen JavaScript für MouseOver-Effekte hinzu, aber das war's dann auch schon. Um Strukturen und Layout in die Seiten zu bringen (z.B. Header oben, Navigation links, Footer unten) wurden Tabellen verwendet, deren Rahmen auf eine Breite von 0 Pixeln konfiguriert wurden.

Jedoch war HTML eigentlich nur als Strukturierungssprache gedacht, und die Vermischung von Struktur und Layout z.B. für blinde Menschen und/oder Textbrowser wirklich problematisch. Heutzutage verwendet man daher Cascading Style Sheets (CSS), die heute von allen modernen Browsern problemlos interpretiert werden. Sie erlauben eine vollständige Trennung von Struktur (HTML-Code) und Layout (CSS-Code).

Nun ist das ja eine wirklich feine Sache, aber ein aktuelles Projekt stellte mich vor eine Herausvorderung. Das (vorgegebene) Layout sieht eine Fußzeile vor, die bei wenig Inhalt an der Unterseite des Browsers, bei viel Inhalt jedoch am Ende der Seite stehen sollte. Natürlich soll sie sich auch nicht mit dem Inhalt überlappen. Einfache Sache, sollte man meinen. Früher hätte man dazu einfach eine Tabelle genommen, und diese mit 'height="100%"' (mindestens gesamtes Fenster) aufgeblasen. Heute natürlich nicht mehr. Statt dessen nimmt man <div>s, also etwa so:

  1. &lt;div id="contents"&gt;
  2. Some contents....
  3. &lt;/div&gt;
  4.  
  5. &lt;div id="footer"&gt;
  6. Some footer
  7. &lt;/div&gt;

Will man gültiges HTML 4.01 schreiben, könnte die erste Idee für die passenden CSS-Anweisungen vielleicht so aussehen:

  1. &nbsp; html, body {
  2. &nbsp; position: absolute;
  3. &nbsp; top: 0px; left: 0px; right: 0px;
  4. &nbsp; min-height: 100%;
  5. &nbsp; margin: 0px; /* Außenabstand */
  6. &nbsp; padding: 0px; /* Innenabstand */
  7. &nbsp; }
  8.  
  9. #footer {
  10. &nbsp; position: relative;
  11. &nbsp; height: 50px;
  12. &nbsp; bottom: 0px;
  13. &nbsp; }

Funktioniert natürlich nicht (schnell feststellbar mit verschiedenen Hintergrundfarben). Auch diverse andere Kombinationen mit 'position', 'height' und 'min-height' brachten keinen Erfolg. Nun denn, ein anderer Ansatz, der ein bisschen dreckig erscheint:

  1. &nbsp; html, body {
  2. &nbsp; min-height: 100%;
  3. &nbsp; margin: 0px;
  4. &nbsp; padding: 0px;
  5. &nbsp; }
  6.  
  7. #contents {
  8. &nbsp; min-height: 100%;
  9. &nbsp; }
  10.  
  11. #footer {
  12. &nbsp; height: 50px;
  13. &nbsp; margin-top: -50px;
  14. &nbsp; }

Auf diese Art wird der Hauptbereich aufgeblasen, der Footer steht drunter, wird aber durch den negativen oberen Außenrand ein Stück hinaufgezogen. Wunderbar, tut was ich will. Naja, fast. Wird der Inhalt länger, liegt er (je nach Interpretation des Browser) überdeckt er den Footer. Ist ja auch logisch, dieser wurde ja quasi Hochgezogen. Also spendiere ich dem #contents ein 'padding-bottom: 50px', also einen Innenabstand. Nanu? Das hat sich wieder auf die Höhe des Bereichs ausgewirkt, der nun "100%+50px" zu sein scheint - der Footer liegt auf einer leeren Seite wieder außerhalb des Bildschirms und man muss runterscrollen - wieder nichts. Die Lösung scheint ein weiteres DIV zu sein, welches in #contents liegt und per margin-bottom den nötigen Abstand einhält:

  1. &nbsp; &lt;div id="outerContents"&gt;
  2. &nbsp; &lt;div id="innerContents"&gt;
  3. &nbsp; Some contents....
  4. &nbsp; &lt;/div&gt;
  5. &nbsp; &lt;/div&gt;
  6. &nbsp; &lt;div id="footer"&gt;
  7. &nbsp; A footer text
  8. &nbsp; &lt;/div&gt;

mit dem folgenden CSS:

  1. &nbsp; html, body {
  2. &nbsp; min-height: 100%;
  3. &nbsp; height: 100%;
  4. &nbsp; margin: 0px;
  5. &nbsp; padding: 0px;
  6. &nbsp; }
  7.  
  8. #outerContents {
  9. &nbsp; min-height: 100%;
  10. &nbsp; }
  11.  
  12. #innerContents {
  13. &nbsp; margin-bottom: 50px;
  14. &nbsp; }
  15.  
  16. #footer {
  17. &nbsp; margin-top: -50px;
  18. &nbsp; height: 50px;
  19. &nbsp; }

Mit diesem Code sieht es in Firefox schon wirklich gut aus! Opera und Konqueror sind leider anderer Meinung und schieben den Footer wieder unter den Browserrand, und da wir (noch) in einem demokratischem Land liegen bäuge ich mich dem Mehrheitsentscheid. Statt dem (intuitiv richtigem) Außenabstand 'margin-bottom' entscheide ich mich testweise mal für den Innenabstand und *tada* es funktioniert! Naja... fast. Der IE6 mag sich mit dem 'min-height: 100%' nicht zufrieden geben und besteht auf ein 'height: 100%' im #outerContents - welches jedoch den Rest der Welt in den Wahnsinn treibt. Der Extrabefehl sollte also über eine kleine Browserweiche, zum Beispiel per Conditional Comment, eingebunden werden.

Das fertige HTML mit einer immer am Fuß der Seite bzw. des Browserfensters klebenden Leiste sieht dann schließlich so aus:

  1. &lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  2. &nbsp; "http://www.w3.org/TR/html4/strict.dtd"&gt;
  3. &lt;html&gt;
  4. &nbsp; &lt;head&gt;
  5. &nbsp; &lt;title&gt;Page title&lt;/title&gt;
  6. &nbsp; &lt;style type="text/css"&gt;
  7. &nbsp; html, body {
  8. &nbsp; height: 100%;
  9. &nbsp; margin: 0px;
  10. &nbsp; padding: 0px;
  11. &nbsp; }
  12. #outerContents {
  13. &nbsp; min-height: 100%;
  14. &nbsp; }
  15. #innerContents {
  16. &nbsp; padding-bottom: 50px;
  17. &nbsp; }
  18. #footer {
  19. &nbsp; margin-top: -50px;
  20. &nbsp; height: 50px;
  21. &nbsp; }
  22. &nbsp; &lt;/style&gt;
  23.  
  24. &nbsp; &lt;!--[if IE 6]&gt;
  25. &nbsp; &lt;style type="text/css"&gt;
  26. &nbsp; #outerContents {
  27. &nbsp; height: 100%;
  28. &nbsp; }
  29. &nbsp; &lt;/style&gt;
  30. &nbsp; &lt;![endif]--&gt;
  31. &lt;/head&gt;
  32. &lt;body&gt;
  33. &nbsp; &lt;div id="outerContents"&gt;
  34. &nbsp; &lt;div id="innerContents"&gt;
  35. &nbsp; Some contents
  36. &nbsp; &lt;/div&gt;
  37. &nbsp; &lt;/div&gt;
  38. &nbsp; &lt;div id="footer"&gt;
  39. &nbsp; Some footer
  40. &nbsp; &lt;/div&gt;
  41. &lt;/body&gt;

Diese Lösung habe ich mit Opera 9.27, Opera 9.50 Beta, Firefox 2.0.0.13, Konqueror 3.5.8 sowie dem Internet Explorer 6 erfolgreich getestet. Ich mag HTML und CSS, aber manche (scheinbare) Kleinigkeiten können einen echt in den Wahnsinn treiben. Vor allem, wenn die Browser den Code dann auch noch dermaßen unterschiedlich Interpretieren.

Comments

Ja, es ist tatsächlich erstaunlich wie schwierig manche Dinge mit CSS zu erledigen sind - im Gegensatz zum old fashioned Tabellenlayout. Interessant finde ich hier YAML (Yet Another Multicolumn Layout) http://www.yaml.de, leider nur CC und nicht GPL, aber das zugehörige Buch von Dirk Jesse ist wirklich gut.