position:absolute;
bottom:0;
left:0;
width:100%;
margin:-80px 0 auto;}
Sticky Footer - Version III
Sticky Footer - Version III
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. Html footer immer unsen.cgt. hinter dem Footer verschwindet. 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
5em 1em;}
#footer {
position: absolute;
bottom: 0;
width: 100%;
line-height: 1. 5em;
text-align: center;
background: #8B8878;}
HTML:
Unten platzierter Footer
Der Footer befindet sich am unteren Rand des Wrappers
Sehen wir uns das Ergebnis in Demo 1 an, so ist dies zwar dem Code entsprechend, jedoch nicht so, wie sich das mancher möglicherweise vorgestellt hat. Vielleicht hättet ihr ihn doch lieber gerne am unteren Bildschirmrand?
Html footer immer unten link. Auch kein Problem. Wir müssen hierzu lediglich dem "Wurzelelement" html und dem body noch einen height-Wert von 100% zuweisen, was der Höhe des "Viewports" (verfügbarer Bildschirmbereich für die Seitendarstellung) entspricht. Dem #wrapper verpassen wir noch eine Mindesthöhe von ebenfalls 100%. Damit wird der Footer nicht am Ende des Contents angeordnet, sondern wirklich ganz unten am unteren Bildschirmrand.
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 */