Footer immer unten oder Sticky Footer

Wer im Internet nach einer Lösung gesucht hat, seine Fußzeile (Footer) immer am unteren Browserfenster zu positionieren, wird bestimmt schon viele verschiedene Möglichkeiten, wie Footer StickAlt oder Footer Stick, gefunden haben. Normalerweise sind diese Möglichkeiten völlig ausreichend.

Trotzdem möchte ich an dieser Stelle eine weitere Möglichkeit vorstellen. Zugegeben, es ist keine optimale Lösung, denn es wird immerhin ein zusätzliches leeres Element eingeführt. Ich glaube auch nicht, dass sich diese Variante durchsetzen wird. Deshalb versteht es vielmehr als kleines Experiment.

Schritt 1 HTML-Markup

Bevor es an den Style-Angaben geht, wird erst das HTML-Dokument erstellt. Dazu wird das leere Element FOOTERABSTAND , sowie die drei Hauptbereiche, HEADER, CONTENT und FOOTER notiert. Da es hier nur um die grundlegenden Angaben gehen soll, wird das Body-Element als Container benutzt und gleichzeitig zentriert. Der nachfolgende Code bezieht sich nur auf die Angaben, die sich zwischen den <body> </body> Tags befinden.


<body>

<div id="footerabstand"></div>

<div id="header"><h1>Footer immer unten</h1></div>

<div id="content">
 <h2>Platz für weitere Spalten ( Menü und Inhalt )</h2>
</div>
 
<div id="footer"><h4>Footer</h4></div> 
</div>

</body>
		 

Schritt 2 Style-Angaben

Zunächst muss den Elementen html, body und #footerabstand eine Höhe von 100% zugewiesen werden, um zu gewährleisten das immer die gesamte Höhe des Browserfensters ausfüllt wird.


html , body , #footerabstand {
 height: 100%;
}
 

Schritt 3 CSS-Regel für #footerabstand

Nun folgt die wichtigste CSS-Regel, die dafür sorgt, dass die Fußzeile, bei wenig Inhalt, immer am unteren Rand des Browserfensters klebt.

#footerabstand {

width:1px;
margin-bottom:-100px;
margin-right:-1px;
float:left;

} 

Die Angabe width: ist zwingend und sollte einen Wert von mindestens 1 Pixel haben. Der negative untere Außenabstand entspricht der Footerehöhe und bewirkt, dass die Fußzeile, bei wenig Inhalt, in den sichtbaren Bereich geschoben wird. Damit sich nachfolgende Container (Boxen) rechts daneben platzieren können, muss hier noch nach links gefloatet werden. Mit margin-right:-1px; wird verhindert, dass die angegebene Gesamtbreite nicht überschritten wird.

Nachfolgend werden die Regeln für body , #header , #content und #footer erstellt.

body {
 width:1000px;
 margin:0 auto;
 background:#ddd;
}

#header {
 height:100px;
 
 width:100%;
 float:left;
 
 background-color:#09c;
}

#content {
 width:100%;
  
 float:left;
 
 background:#ddd;
} 


#footer {

 clear:left;
 
 height:100px;
 background-color:#09c;
}

Die wichtigste Angabe ist clear:left; des #footer Selektors, die dafür sorgt, dass sich die Fußzeile immer unter Footerabstand platziert. Die rot markierten Anweisungen werden vom IE bis Version 7 benötigt. Eine Erläuterung dieser Regeln folgt am Anschluss dieser Anleitung.

Das war's schon und es folgt ein erstes Beispiel».

Besonderheiten im Internet Explorer bis Version 7

Die Angaben float:left; und width:100%; im #header {} Selektor, werden für den IE bis Version 7 für den Fall benötigt einfachen Text zwischen Header und Footer zu schreiben, ohne dabei weitere Container (Boxen) zu notieren. Weiterhin benötigt der IE bis Version 6 diese Angaben, um zu verhindern, dass bei vorhandenen Links mit Hover-Funktionalität die Fußzeile nicht nach oben rutscht. Die Float-Eigenschaft im #content {} Selektor werden ebenfalls für alle IE bis Version 7 benötigt und sorgt dafür, dass die Fußzeile immer am unteren Rand des Browserfensters klebt. Wobei diese Angabe auch für moderne Browser notiert werden sollte. Generell werden moderne Browser durch diese Angaben nicht beeinflusst, sodass diese Angaben immer gemacht werden können.

Noch ein Hinweis

Wer keine Höhenangaben im #footer Selektor machen kann oder möchte, der muss, dem IE zu liebe, die height durch die width Eigenschaft ersetzen.

Fazit

Mal abgesehen von dem zusätzlich eingeführten Element und den Eigenarten des IE < 8, die aber leicht zu beheben sind, ist diese Methode recht stabiel und funktioniert in den von mir getesteten Browsern, wie IE bis Version 8, FF3.5 und 4 , Opera 8 - 10, NN9 und Chrome, ohne Probleme.

Zum Schluß folgen noch zwei Beispiele.Beispiel 2» Beispiel 3»

Es geht aber auch mit dem Pseudoelement :before. Wie das funktioniert könnt ihr erfahren»

erstellt am 22.06.2011

nach oben