Mit :before die Fußzeile (Footer) immer unten

Hier möchte ich euch eine einfache und barrierearme Variante vorstellen, seine Fußzeile bei wenig Inhalt immer am unteren Rand des Browserfensters zu platzieren. Der Aufbau ist nahezu mit der bereits hier» vorgestellten Variante identisch. Der Vorteil ist aber der, dass hier kein leeres Element mehr benötigt wird.

Allerdings funktioniert die Sache nur mit Browser, die das Pseudoelement :before unterstützen. Dies sollten aber alle gängigen Browser bis auf den IE kleiner 8 tun.

Style-Angaben

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

Damit alles funktioniert, müssen den Elementen html, body und #container eine Höhe von 100 Prozent zugewiesen werden.

#container:before {
 content:"";
 height:100%;
 margin-bottom:-100px;
  float:left;
 display:inline-block;
}

Mit :before wird unmittelbar nach dem einleitenden <div id="container"> ein Inhalt eingefügt. Dieser besteht in diesem Fall aus einer festgelegten Höhe von 100 Prozent. Der untere Margin-Wert entspricht dabei der Footerhöhe. Wichtig ist hier die Regel float:left. Damit das #footer Element immer unter dem content bleibt, muss hier clear:left angegeben werden. Die Regel display:inline-block benötigt der IE 8.

#footer {
 clear:both;
 height:100px;
 background:#09c;
} 		   

So, dass war's auch schon und es folgt der gesamte Code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>

<title>footer</title>
<style type="text/css">

*  {
 margin:0;
 padding:0;
 list-style:none;
}
 
html , body , #container {
 height:100%;
 
}
body {
 background:#333;
}
 
#container {
 width:1000px;
 margin:0 auto; 
 background:#ddd;
}
 
#container:before {
 content:"";
 height:100%;
 margin-bottom:-100px;
 float:left ;
 display:inline-block; 
}

#header {
 background:#09c;
 height:100px;
}  

#content {
 overflow:hidden;
 background:#ddd;
}
 
#footer {
 clear:both;
  height:100px;
 background:#09c;

} 

p {
 padding:30px;
}

</style>
</head>

<body>
<div id="container">
<div id="header"><h1>Footer immer unten mit der Pseudoklasse :before</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>

</html>

Beispiel 1» Beispiel 2»

erstellt am 19.12.2011

nach oben