M
Maik
Wie lässt sich der Footer am unteren Fensterrand ausrichten?
Die Ausgangssituation: Der Footer-Bereich einer Webseite soll bei geringem Seiteninhalt am unteren Fensterrand "haften", und mit zunehmenden Inhaltsumfang nach unten rücken, wenn das Dokument im Fenster gescrollt werden kann.
Die beiden Schnappschüsse sollen das Vorhaben verdeutlichen:
(v.l.n.r.: Footerposition mit wenig Inhalt, Footerposition mit scrollfähigem Inhalt)
Zur Realisierung stehen uns drei CSS-Techniken zur Auswahl, wobei sich der erste und zweite Lösungsansatz vom Grundprinzip her ähneln, mit Hilfe eines negativen margin-bottom- bzw. margin-top-Wert den Footer an die gewünschte Position im Browserfenster zu rücken.
Für #wrapper wird eine Mindesthöhe von 100% eingerichtet, sodass sich der Block ohne größeren Inhaltsumfang vom oberen bis zum unteren Rand im Anzeigebereich des Browserfensters erstreckt, und erhält einen negativen unteren Außenabstand, der der Höhe des Footers entspricht, um ihn auf diese Weise nach oben in den sichtbaren Bereich des Viewports zu verrücken.
Hierbei ist darauf zu achten, im standardkonformen Modus zusätzlich die Höhe des Viewports (<html> & <body>) auf 100% zu strecken, da ansonsten die Angabe zur Mindesthöhe für #wrapper nicht greift, und sich seine Blockhöhe lediglich aus dem Elementinhalt ergibt.
Gehe zum Anfang
Gehe zum Anfang
Gehe zum Anfang
Bei allen drei vorgestellten Varianten ist darauf zu achten, für den mittleren DIV-Block #middle einen unteren Innenabstand festzulegen, der sich mindestens mit der Höhe des Footers deckt, damit sein Inhalt nicht unter bzw. hinter dem Footer verschwindet.
Die drei Beispiele hänge ich hier zusätzlich in einem ZIP-Archiv an.
mfg Maik
Die Ausgangssituation: Der Footer-Bereich einer Webseite soll bei geringem Seiteninhalt am unteren Fensterrand "haften", und mit zunehmenden Inhaltsumfang nach unten rücken, wenn das Dokument im Fenster gescrollt werden kann.
Die beiden Schnappschüsse sollen das Vorhaben verdeutlichen:
(v.l.n.r.: Footerposition mit wenig Inhalt, Footerposition mit scrollfähigem Inhalt)
Zur Realisierung stehen uns drei CSS-Techniken zur Auswahl, wobei sich der erste und zweite Lösungsansatz vom Grundprinzip her ähneln, mit Hilfe eines negativen margin-bottom- bzw. margin-top-Wert den Footer an die gewünschte Position im Browserfenster zu rücken.
- margin-bottom für #wrapper
Der DIV-Block #footer wird im HTML-Code im Anschluß an den DIV-Block #wrapper notiert, der die übrigen Seitenbereiche (Header, Navigation, Inhalt, usw.) in sich aufnimmt.
- HTML-Snippet:
- HTML-Snippet:
HTML:
<body>
<div id="wrapper">
<div id="header">
...
</div>
<div id="middle" class="clearfix">
...
</div>
</div>
<div id="footer">
...
</div>
</body>Für #wrapper wird eine Mindesthöhe von 100% eingerichtet, sodass sich der Block ohne größeren Inhaltsumfang vom oberen bis zum unteren Rand im Anzeigebereich des Browserfensters erstreckt, und erhält einen negativen unteren Außenabstand, der der Höhe des Footers entspricht, um ihn auf diese Weise nach oben in den sichtbaren Bereich des Viewports zu verrücken.
Hierbei ist darauf zu achten, im standardkonformen Modus zusätzlich die Höhe des Viewports (<html> & <body>) auf 100% zu strecken, da ansonsten die Angabe zur Mindesthöhe für #wrapper nicht greift, und sich seine Blockhöhe lediglich aus dem Elementinhalt ergibt.
- CSS-Snippet:
CSS:
html,body {
height:100%;
}
#wrapper {
position:relative;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -80px;
}
#footer {
position:relative;
width:900px;
height:80px;
margin:0 auto;
}- Vollständiger Quellcode:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Sticky Footer - Version I</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-01-16" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
font:normal 1em verdana, sans-serif;
}
#wrapper {
position:relative;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto -80px;
background:#f8f8f8;
}
#header {
height:100px;
background:#e8e8e8;
padding:10px;
text-align:center;
}
#middle {
padding:10px 10px 80px 10px;
}
#middle p {
margin:5px 0;
}
#footer {
position:relative;
width:900px;
height:80px;
line-height:80px;
margin:0 auto;
background:#e8e8e8;
text-align:center;
}
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* Bereich nicht für IE-mac Ende */
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Sticky Footer - Version I</h1>
</div>
<div id="middle" class="clearfix">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<!-- Ab hier ist der weitere Inhalt zunächst auskommentiert, um die Ausgangsposition des Footers zu demonstrieren -->
<!--<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>-->
<p>- End of Content -</p>
</div>
</div>
<div id="footer">
<p>© 2010 Maik@tutorials.de</p>
</div>
</body>
</html>Gehe zum Anfang
- margin-top für #footer
Diese Methode ist im HTML-Aufbau mit der ersten identisch, nur mit dem Unterschied, dass hier für den DIV-Block #footer ein negativer oberer Außenabstand definiert wird, der seiner vorgesehenen Höhe entspricht, um ihn ebenfalls in den sichtbaren Bereich des Browserfensters zu rücken.
- CSS-Snippet:
- CSS-Snippet:
CSS:
html,body {
height:100%;
}
#wrapper {
position:relative;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
}
#footer {
position:relative;
width:900px;
height:80px;
margin:-80px auto 0;
}- Vollständiger Quellcode:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Sticky Footer - Version II</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-01-16" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
font:normal 1em verdana, sans-serif;
}
#wrapper {
position:relative;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
background:#f8f8f8;
}
#header {
height:100px;
background:#e8e8e8;
padding:10px;
text-align:center;
}
#middle {
padding:10px 10px 80px 10px;
}
#middle p {
margin:5px 0;
}
#footer {
position:relative;
width:900px;
height:80px;
line-height:80px;
margin:-80px auto 0;
background:#e8e8e8;
text-align:center;
}
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* Bereich nicht für IE-mac Ende */
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Sticky Footer - Version II</h1>
</div>
<div id="middle" class="clearfix">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<!-- Ab hier ist der weitere Inhalt zunächst auskommentiert, um die Ausgangsposition des Footers zu demonstrieren -->
<!--<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>-->
<p>- End of Content -</p>
</div>
</div>
<div id="footer">
<p>© 2010 Maik@tutorials.de</p>
</div>
</body>
</html>Gehe zum Anfang
- position:absolute für #footer
In dieser Variante wird im HTML-Code der Footer-Bereich innerhalb des relativ positionierten DIV-Blocks #wrapper an dessen Ende notiert, und mit einer absoluten Positionsangabe bottom:0 an seinem unteren Elementrand ausgerichtet.
- HTML-Snippet:
- HTML-Snippet:
HTML:
<body>
<div id="wrapper">
<div id="header">
...
</div>
<div id="middle" class="clearfix">
...
</div>
<div id="footer">
...
</div>
</div>
</body>- CSS-Snippet:
CSS:
html,body {
height:100%;
}
#wrapper {
position:relative;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
}
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
margin:-80px 0 auto;
}- Vollständiger Quellcode:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Sticky Footer - Version III</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<meta name="author" content="Maik" />
<meta name="date" content="2010-01-16" />
<style type="text/css">
* {
margin:0;
padding:0;
}
html,body {
height:100%;
}
body {
font:normal 1em verdana, sans-serif;
}
#wrapper {
position:relative;
width:900px;
min-height:100%;
height:auto !important;
height:100%;
margin:0 auto;
background:#f8f8f8;
}
#header {
height:100px;
background:#e8e8e8;
padding:10px;
text-align:center;
}
#middle {
padding:10px 10px 80px 10px;
}
#middle p {
margin:5px 0;
}
#footer {
position:absolute;
bottom:0;
left:0;
width:100%;
height:80px;
line-height:80px;
background:#e8e8e8;
text-align:center;
}
.clearfix:after {
content:".";
display:block;
height:0;
font-size:0;
clear:both;
visibility:hidden;
}
.clearfix {
display:inline-block;
}
/* Bereich nicht für IE-mac Anfang \*/
* html .clearfix {
height:1%;
}
.clearfix {
display:block;
}
/* Bereich nicht für IE-mac Ende */
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Sticky Footer - Version III</h1>
</div>
<div id="middle" class="clearfix">
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<!-- Ab hier ist der weitere Inhalt zunächst auskommentiert, um die Ausgangsposition des Footers zu demonstrieren -->
<!--<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>-->
<p>- End of Content -</p>
</div>
<div id="footer">
<p>© 2010 Maik@tutorials.de</p>
</div>
</div>
</body>
</html>Gehe zum Anfang
Bei allen drei vorgestellten Varianten ist darauf zu achten, für den mittleren DIV-Block #middle einen unteren Innenabstand festzulegen, der sich mindestens mit der Höhe des Footers deckt, damit sein Inhalt nicht unter bzw. hinter dem Footer verschwindet.
- CSS-Snippet:
CSS:
#middle {
padding:10px 10px 80px 10px; /* Innenabstand oben - rechts - unten - links */
}Die drei Beispiele hänge ich hier zusätzlich in einem ZIP-Archiv an.
mfg Maik
