Archiv:

Latest photoblog

photoblog

Blog » Einmal Erdgeschoss bitte!

Einmal Erdgeschoss bitte!

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;
}

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>

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>

#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.

18 Kommentare zu “Einmal Erdgeschoss bitte!”

  1. Grafik: GravatarJens Grochtdreis:

    Sieht interessant aus. Aber was ist gegen footerStickAlt zu sagen ?

  2. Grafik: GravatarManuel:

    Ja, die Frage ist garnich schlecht.

    1. Hatte ich garnich an den Artikel vom blauen Mann, und seine Existenz gedacht *g*

    2. »footerStick example with long content (buggy)« — Sieht zwar semantischer aus als meins, dafür aber buggy. Ganz Fehlerfrei ist meins zwar auch nicht, wenn man mal hier im Weblog die Live-Vorschau anschaut, aber im großen und ganzen ists frei skalierbar.

    3. Hatte bisher keinen vernünftigen deutschen Artikel gefunden bei dem das Thema behandelt wird. Und wegen Webkrauts und so dacht ich mir … ;) Nee, da die Frage letztens (mal wieder) im xhtmlforum auftauchte wie man’s macht, dachte ich mir, haste Zeit, schreibste einen.

  3. Grafik: GravatarJann:

    Danke für diesen ausführlichen Artikel! Muss ich direkt mal in der Praxis umsetzen…

  4. Grafik: GravatarMarc Zahn:

    Der am besten funktionierende Footer, den ich bisher hatte.

    Übrigens, gibt man dem umfassenden Div ein border-bottom, wandert der Footer im Opera zumindest mit nach unten. Allerdings zum Preis einer ständig vorhandenen 1px-Scrollleiste…

  5. Grafik: Gravataruehsi:

    Vielen Dank,
    ich hab deine Anleitung versucht, auf einen WordPress-Blog zu übertragen. Ich hätte nie damit gerechnet, dass es funktioniert :) Das einzige Problem ist nun, dass der Footer nicht dargestellt wird. Der Content fließt also bis Browserkante unten, der gestaltete Footer allerdings scheint verschwunden. (http://www.classic-gti.de ist der Blog um den ich rede)

    Ich danke trotzdem für die Anleitung! Mfg Uehsi

  6. Grafik: GravatarMeier Rudolf:

    Ich habe glaube ich eine bessere Lösung. Angefangen habe ich mit deinem Code. Nach ein paar Stunden Rumprobieren habe ich jetzt aber eine einfachere Lösung, die mir besser gefällt. Und bisher konnte ich noch keinen Fehler daran finden.
    Probier mal das: HTML und BODY auf Höhe 100% stellen. Da rein eine Tabelle mit Höhe 100%, welche 1 Spalte und zwei Zeilen hat. In die obere Zeile steckst du die Webseite (vertical-align:top noch setzen) und in die untere die Fusszeile (vertical-align:bottom). Ich habe als Fusszeile eine Tabelle mit einer fixen Höhe und der Breite 100% genommen… scheint alles zu klappen (IE 6 und FireFox 1.5).

  7. Grafik: GravatarMark:

    Und wie funktioniert das, wenn ich ein layout habe mit header, da drunter eine spalte für die navi, dann der content und da drunter der footer?

    Das der Quellcode von einem CMS generiert wird hab ich da leider wenig einfluss drauf, die div´s sind folgendermaßen aufgebaut

    [wrapper]
    [header]
    [/header]
    [navigation]
    [/navigation]
    [content]
    [/content]
    [footer]
    [/footer]
    [/wrapper]

    Danke und Grüße
    Mark

  8. Grafik: Gravatarfidel:

    Meier Rudolf:
    „Da rein eine Tabelle mit Höhe 100%,“

    Genau das möchten wir doch nicht!?.. Ganz zu Beginn des Artikels:
    „Früher … Als man noch Tabellen benutzte..“
    –>??
    Superidee! Bei mir stellt sich nun jedoch das Problem, dass ich nur den obersten div-Block auf die gesamte Höhe bringe. Bei einem dahinein „gewrappten“ div Block funktioniert das nicht mehr…
    Das Problem stellt sich so:

    [div id=“totalwrapper“]
    [div id=“mainwrapper“]
    [div id=“header“] [/div]
    [div id=“maincontent“]Blabla
    [/div]
    [div id=“footer“][/div]
    [/div]
    [/div]
    –>

    Wenn ich nun für div#totalwrapper ein kachelndes Hintergrundbild angebe und ein anderes kachelndes Hintergrundbild für div#mainwrapper, so funktioniert das mit der 100% Höhe nur für den totalwrapper, jedoch nicht für den mainwrapper.
    Trotzdem hilfreich!

  9. Grafik: GravatarLayoutumsetzung - XHTMLforum:

    […] Ich hab in der Zwischzeit fleiig gegoogelt und zu meinem footer problem ein paar links gefunden: 29 Manuel Bieh – xhtml, css, webdesign … 22 Einmal Erdgeschoss bitte! 198 The Man in Blue > footerStickAlt: A more robust method of positioning a footer footerStick […]

  10. Grafik: GravatarAndreas:

    Danke, danke, danke! … und: Danke!! :)

  11. Grafik: Gravatarwolf:

    Stellt sich natürlich die Frage, warum man, wenn man von der Frickelei des Tabellenlayouts wegkommen möchte, nochmehr frickeln muss, weil die Herren des css-Konsortiums es für unwürdig gehalten haben, eine solche 0815-Funktion ins Repertoire der css-Möglichkeiten aufzunehmen.

  12. Grafik: Gravatarkathrin:

    wenn man das Browserfenster vertical verkleinert, verschwindet der Footer trotzdem. Gibt es eine Lösung, dass der Content scrollbar wird und der Footer stehen bleibt?

  13. Grafik: GravatarDaniel K.:

    Was mir noch fehlt:Wie verhindert man, dass der Footer verschwindet, wenn das Fenster zu klein für den Inhalt ist? In diesem Fall sollte der Inhalt (und nur der) mit einem Scrollbalken versehen werden.

  14. Grafik: GravatarDaniel K.:

    Update:

    Ich löse dieses Problem wie auf alistapart.com mit ein wenig Scripting:
    Das HTML besteht aus drei Block-Level-Elementen, Kopfzeile, Inhalt und Fußzeile. Das CSS setzt zur Vereinfachung padding/border/margin der Elemente (inkl. Body) auf 0. Ausserdem wird das Element, das den Inhalt beherbergt, auf „overflow:auto“ gesetzt. Sonst benötigt man nichts, keine Hacks oder ähnliches.

    Per Javascript wird einmalig nach dem Laden der Seite (window.onload) und nach jedem Resize (window.onresize) des Fensters der Platz berechnet, der für den Inhalt nach Abzug von Kopf- und Fußzeile übrig bleibt und dem Inhalt zugewiesen.

    Auf diese Weise ist die Fußzeile immer zu sehen.

  15. Grafik: GravatarNils Loeffel:

    Allerbesten Dank für den Artikel, kein anderer Footer gefunden der so einfach zu realisieren ist :) danle.

  16. Grafik: GravatarTim:

    Die Lösung zu einem immer wiederkehrenden Problem. Vielen Dank.

  17. Grafik: GravatarFooter immer unten anzeigen | funkygog Blog:

    […] Einmal Erdgeschoss bitte! […]

  18. Grafik: GravatarJojo:

    Kann man die „margin-bottom“ Angabe der Zeile „#content {margin-bottom: 1.5em; float: left;}“ bei einem Footer mit unterschiedlicher Höhe irgendwie automatisieren?

Die Trackback-URL lautet