CSS: unten fixiert und zentriert

Sollte ein sticky footer-Lösung wie diese :

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Gibt es andere wie diese;

* {margin:0;padding:0;} 

/* must declare 0 margins on everything, also for main layout components use padding, not 
vertical margins (top and bottom) to add spacing, else those margins get added to total height 
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

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

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;} 

/* CLEAR FIX*/
.clearfix:after {content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}

mit html:

<div id="wrap">

    <div id="main" class="clearfix">

    </div>

</div>

<div id="footer">

</div>

InformationsquelleAutor der Antwort marcgg

Eine jQuery-Lösung

$(function(){
    $(window).resize(function(){
        placeFooter();
    });
    placeFooter();
    //hide it before it's positioned
    $('#footer').css('display','inline');
});

function placeFooter() {    
    var windHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var offset = parseInt(windHeight) - parseInt(footerHeight);
    $('#footer').css('top',offset);
}

<div id='footer' style='position: fixed; display: none;'>I am a footer</div>

Manchmal ist es einfacher zu implementieren JS als hack alte CSS.

http://jsfiddle.net/gLhEZ/

InformationsquelleAutor der Antwort Thilo Savage

Gibt es 2 mögliche Probleme die ich sehe:

1 - IE hat Probleme mit position:fixed in die Vergangenheit. Wenn Sie mit IE7+ mit einem gültigen doctype oder einen nicht-IE browser, ist dies nicht Teil des Problems

2 - geben Sie eine Breite für die Fußzeile, wenn Sie wollen, dass die Fußzeile Objekt zentriert werden. Sonst ist er standardmäßig auf die volle Breite der Seite und dem auto-margin für die linke und Rechte erhalten, auf 0 gesetzt. Wenn Sie möchten, dass die footer-Leiste, um die Breite (wie StackOverflow-Benachrichtigung bar) und zentrieren Sie den text, dann müssen Sie hinzufügen "text-align: center", um Ihre definition.

InformationsquelleAutor der Antwort Rob Allen

Basierend auf dem Kommentar von @Michael:

Gibt es einen besseren Weg, dies zu tun. Erstellen Sie einfach den Körper mit
position:relative und einer Polsterung die Größe der Fußzeile + der Raum
zwischen content und footer, die Sie wollen. Dann stellen Sie einfach ein footer-div mit
eine absolute und bottom:0.

Ich ging Graben für die Erklärung und es läuft darauf hinaus, diese:

• Standardmäßig absolute position bottom:0px legt es auf den unteren Rand des Fensters...nicht unten auf der Seite.
• Relative Positionierung ein element setzt den Umfang Ihrer Kinder absolute position...also durch die Einstellung des Körpers auf die relative Positionierung, die absolute position bottom:0px nun wirklich widerspiegelt, die unten auf der Seite.

Mehr details bei http://css-tricks.com/absolute-positioning-inside-relative-positioning/

InformationsquelleAutor der Antwort lmsurprenant