Erstellen eines Sticky Footer
Das bedeutet, dass der Footer am unteren Rand des Browserfensters ist, auch wenn kein oder wenig Inhalt enthalten ist. Wenn mehr Inhalt vorhanden ist, wird der Footer weiter nach unten geschoben!
Nun zum Aufbau so einer Seite: Zuerst erstellen wir mit KompoZer einen Div Container mit der id seite(#seite). Diesem geben wir folgende Anweisungen:
#seite{
margin :0 auto;
min-height:100%;
height:auto !important;
width:600px;
}
Die Breite könnt ihr an eure Bedürfnisse anpassen!
Nun erstellen wir mit KompoZer im Div Container mit der id seite(#seite) einen weiteren Div Container mit der id aufheben(#aufheben). Dieser id geben wir folgende Anweisungen:
#aufheben{
height:100px;
clear:both;
}
Die Höhe könnt ihr austauschen, sie muss aber mindestens die Höhe des Footers haben!!!
Mit STRG und ENTER setzen wir den Cursor unter unseren Div Container id seite(#seite) und erstellen mit KomopoZer einen weiteren Div Container mit der id footer(#footer). Diesem geben wir folgende Anweisungen:
#footer{
margin:-80px auto 0 auto;
width:600px;
height:80px;
}
Den Wert -80px brauchen wir, damit der footer wieder in den sichtbaren
Bereich gezogen wird, wir haben ja unserer Seite eine Mindesthöhe von 100%
gegeben!!! Dieser Wert muss immer die Höhe des footers haben!!!
Damit das auch wirklich funktioniert, brauchen wir noch eine wichtige Anweisung:
body,html{
height:100.1%;
}
Unser Stylesheet sieht nun so aus:
body,html{
height:100.1%;
}
#seite{
margin :0 auto;
min-height:100%;
height:auto !important;
width:600px;
}
#aufheben{
height:100px;
clear:both;
}
#footer{
margin:-80px auto 0 auto;
width:600px;
height:80px;
}
So sieht der Quelltext unserer Seite aus.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF-8"
http-equiv="content-type">
<title> sticky-footer </title>
<meta content="camouflage1984" name="author">
<style type="text/css">
body, html {
height: 100.1%;
}
#seite {
margin-right: auto;
margin-left: auto;
height: auto ! important;
width: 600px;
background-color: #666666;
min-height: 100%;
}
#footer {
margin: -80px auto 0;
height: 80px;
width: 600px;
background-color: #cc0000;
}
#aufheben {
height: 100px;
clear: both;
visibility: hidden;
}
</style>
</head>
<body>
<div id="seite">
seite<br>
<div id="aufheben">
aufheben
</div>
</div>
<div id="footer">
footer
</div>
</body>
