Jetzt abonnieren!
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.
Veröffentlicht: 11.10.2005, 15:30 Uhr
Rubrik:
Tags:
Diskussion: 18 Kommentare
Social Media:
18 Kommentare zu “Einmal Erdgeschoss bitte!”
Die Trackback-URL lautet
Oktober 11th, 2005 at 21:53
Sieht interessant aus. Aber was ist gegen footerStickAlt zu sagen ?
Oktober 11th, 2005 at 22:12
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.
Oktober 21st, 2005 at 10:42
Danke für diesen ausführlichen Artikel! Muss ich direkt mal in der Praxis umsetzen…
April 3rd, 2006 at 14:38
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…
April 22nd, 2006 at 17:24
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
Juni 17th, 2006 at 01:49
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).
Juli 20th, 2006 at 13:08
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
August 7th, 2006 at 14:54
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!
April 28th, 2007 at 21:41
[…] Ich hab in der Zwischzeit fleißig 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 […]
Juni 6th, 2007 at 13:25
Danke, danke, danke! … und: Danke!! :)
September 11th, 2007 at 15:46
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.
November 9th, 2007 at 21:52
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?
Februar 11th, 2008 at 16:13
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.
Februar 11th, 2008 at 18:20
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.
Juni 27th, 2008 at 10:40
Allerbesten Dank für den Artikel, kein anderer Footer gefunden der so einfach zu realisieren ist :) danle.
Juli 15th, 2008 at 20:54
Die Lösung zu einem immer wiederkehrenden Problem. Vielen Dank.
Mai 31st, 2010 at 23:58
[…] Einmal Erdgeschoss bitte! […]
August 31st, 2010 at 17:45
Kann man die „margin-bottom“ Angabe der Zeile „#content {margin-bottom: 1.5em; float: left;}“ bei einem Footer mit unterschiedlicher Höhe irgendwie automatisieren?