Wie erstelle ich eine nicht-sticky Fußzeile in Bootstrap?

Question

Wie erstelle ich eine Fußzeile, die sich über die gesamte Breite des Bildschirms erstreckt (trotz Bildschirmauflösung) und am unteren Rand der Seite bleibt?

Wenn ich nach diesem suche, bekomme ich Leute, die Code für klebrige Fußzeilen liefern (Fußzeilen, die mit der Seite staubsaugen), und sagende absolute Positionierung (die ich höre, ist ein nein nein).

Ein perfektes Beispiel für das, was ich meine, ist die eine der Seiten twitter bootstrap zitiert als ein Beispiel (https://www.gathercontent.com/). Auf dieser Seite befindet sich die Fußzeile (die wie eine Heldeneinheit oder etwas aussieht) immer unten auf der Seite.

Answer 1

verwenden jquery:

$(window).load(function() { 
    $('.footer').width($(window).width()); 
    $(window).resize(function() { 
     $('.footer').width($(window).width()); 
    }); 
}); 

Vergewissern Sie sich eine js-Datei haben, obwohl

Answer 2

Ich war auf der Suche nach etwas ähnliches wie ich nicht die Fußzeile wollte schweben. Die Fußzeile blockierte die Pulldown-Menüelemente auf kleinen mobilen Geräten. Ich habe nur "navbar-fixed-bottom" aus der Footer-Klasse entfernt.

Ich änderte

<div class = "footer navbar-fixed-bottom"></div> 

zu

<div class = "footer"></div> 

Answer 3

Wenn Sie Bootstrap verwenden, dieses Beispiel zeigt, wie Sie es tun können. Der Name ist auf der Website irreführend, bleibt jedoch am unteren Rand der Seite, wenn nicht viel Inhalt vorhanden ist. Es bewegt sich auch auf der Seite, wenn viel Inhalt vorhanden ist (also nicht klebt).

Die Fußzeile:

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/

Die CSS:

http://getbootstrap.com/docs/4.0/examples/sticky-footer-navbar/sticky-footer-navbar.css

Achten Sie darauf, nicht zu vergessen die

html { 
position: relative; 
min-height: 100%; 
}