sticky footer

Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1120 Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 621 Warning: Invalid argument supplied for foreach() in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 628 Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 621 Warning: Invalid argument supplied for foreach() in /home/.sites/146/site459/web/ernstbrunner/wp/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 628

Ein Footer der immer am unteren Bildschirmrand ist; das kann zweierlei bedeuten:

  1. Der Footer ist immer sichtbar am unteren Rand des Browserfensters, egal ob die Seite gescrollt werden kann oder nicht
  2. Der Footer ist am unteren Rand des Browserfensters, wenn aber gescrollt wird, dann kommt er erst nach dem Content. Er ist also erst sichtbar, wenn zum Ende der Seite gescrollt wurde.

Im Folgenden wird die 2. Art behandelt.

Da diese Technik min-heigth verwendet ist sie nichts für den IE6.

Dem wrapper wird eine minimale Höhe  100% gegeben – dadurch füllt er immer das Browserfenster. Zusätzlich bekommt er die Eigenschaft position:relative. Der Footer liegt innerhalb des wrappers und hat die Eigenschaft position:absolute mit bottom:0 – diese Positionierung bezieht sich auf das nächste Elternelement mit position:relative.

Der footer hat nun eine gewisse Höhe, die Inhalte überlappen könnte. Deshalb kommen alle Inhalte in ein eigenes content-div, das eine margin-bottom hat die der Höhe des Footers entspricht.

Bsp: ein dynamischer sticky footer

CSS

html, body{
padding:0;
margin:0;
height:100%
}
#wrapper{
position:relative;/*damit sich position:absolute auf den wrapper bezieht*/
min-height:100%;/*mindestens das Browserfenster soll gefüllt werden*/
width:100%;/*das ist quasi der neue body, soll also die ganze Breite füllen*/
overflow:auto;/*verhindert Fehler in IE7 und Safari*/
}
#content{
padding:10px;
margin-bottom:100px;/*entspricht der Footer-Höhe*/
}
#stickyfoot{
position:absolute;/*bezieht sich auf den #wrapper*/
bottom:0px;/*der footer ist am unteren Rand vom wrapper*/
height:100px;
width:100%;
background:#000;
color:#fff;
}
HTML
<body>
 <div id="wrapper">
 <div id="content">
 Inhalte hier
 </div>
 <div id="stickyfoot">der footer</div>
 </div>
</body>

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>