Flushing Fußzeile an den unteren Rand der Seite, Twitter Bootstrap

Question

Ich bin im Allgemeinen mit der Technik des Spülens einer Fußzeile mit CSS vertraut.

Aber ich habe einige Schwierigkeiten, diesen Ansatz für Twitter-Bootstrap, wahrscheinlich aufgrund der Tatsache, dass Twitter-Bootstrap ist in der Natur reagieren zu arbeiten. Mit Twitter Bootstrap bin ich nicht in der Lage, die Fußzeile an den unteren Rand der Seite mit dem Ansatz in der obigen Blog-Post beschrieben bündig zu bekommen.

Answer 1

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

Die Höhe der Fußzeile entspricht der Größe des unteren Einzugs des Umbruchelements.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

Answer 2

Eine weitere mögliche Lösung ist die Verwendung von Media-Queries

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

Answer 3

So macht es Bootstrap:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Verwenden Sie einfach den Seitenquelltext und Sie sollten es sehen können. Vergessen Sie nicht die <div id="wrap"> an der Spitze.

Answer 4

Verwenden Sie die unten stehende Klasse, um sie in die letzte Zeile der Seite zu verschieben und sie auch in die Mitte der Seite zu bringen. Wenn Sie Ruby on Rails HAML Seite verwenden, können Sie den unten stehenden Code verwenden. %footer.card.text-center

Bitte vergessen Sie nicht, den Twitter-Bootstrapp zu verwenden.

Answer 5

Hier ist ein Beispiel mit css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

fiddle