Fußzeile in Bootstrap behoben

81

Ich probiere Bootstrap aus und habe mich gefragt, wie ich die Fußzeile unten reparieren kann, ohne dass sie von der Seite verschwindet, wenn der Inhalt gescrollt wird.

html css twitter-bootstrap footer stdcerr
quelle

Antworten:

198

Geben Sie eine feste Position wie folgt ein, um eine Fußzeile zu erhalten, die am unteren Rand Ihres Ansichtsfensters haftet:

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap enthält dieses CSS im Abschnitt Navbar> Platzierung mit der Klasse fixed-bottom. Fügen Sie diese Klasse einfach Ihrem Fußzeilenelement hinzu:

<footer class="fixed-bottom">

Bootstrap-Dokumente: https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Josh KG
quelle
Dies und der Kommentar von @ Daniel-Tero haben es für mich getan.
jmng
4
Wenn eine Seite gescrollt wird, funktioniert sie nicht richtig.
Arnab
2
fixed-bottomIch habe nicht das getan, was ich erwartet hatte, sondern static-bottomdie Höhe des Seiteninhalts respektiert.
Gjaa
6

Füge das hinzu:

<div class="footer fixed-bottom">
Matheus Gomes
quelle
3

Fügen Sie z-index:-9999;dieser Methode hinzu, oder sie deckt Ihre obere Leiste ab, wenn Sie haben 1.

Daniel Tero
quelle
0

Sie können dies tun, indem Sie den Seiteninhalt in ein div mit dem folgenden angewendeten ID-Stil einschließen:

<style>
#wrap {
   min-height: 100%;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}
</style>

<div id="wrap">
    <!-- Your page content here... -->
</div>

Hat für mich gearbeitet.

Herr Porcupine
quelle
-4

Vielleicht möchten Sie dieses Beispiel überprüfen: http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Vladimir Dimchev
quelle
2
Das ist für klebrige Fußzeile, nicht feste Fußzeile: /
az_
@aaronz was ist der Unterschied?
Arsen Ibragimov
4
@ArsenIbragimov Die klebrige Fußzeile wird bis zum Ende der Seite verschoben, wenn der Inhalt größer als die Ansicht ist. Die feste Fußzeile ist immer am unteren Rand der Ansicht sichtbar.
Az_