Ich bin allgemein mit der Technik vertraut, eine Fußzeile mit CSS zu leeren.
Ich habe jedoch einige Probleme damit, diesen Ansatz für den Twitter-Bootstrap zum Laufen zu bringen, was höchstwahrscheinlich auf die Tatsache zurückzuführen ist, dass der Twitter-Bootstrap von Natur aus reagiert. Mit Twitter Bootstrap kann ich die Fußzeile nicht dazu bringen, mit dem im obigen Blog-Beitrag beschriebenen Ansatz zum Ende der Seite zu gelangen.
css
twitter-bootstrap
footer
Calvin Cheng
quelle
quelle
Antworten:
Fand die Snippets hier funktioniert wirklich gut für Bootstrap
Html:
CSS:
quelle
Dies ist jetzt in Bootstrap 2.2.1 enthalten.
Bootstrap 3.x.
Verwenden Sie die Navbar-Komponente und fügen Sie eine
.navbar-fixed-bottom
Klasse hinzu:Bootstrap 4.x.
Vergessen Sie nicht,
body { padding-bottom: 70px; }
den Seiteninhalt hinzuzufügen oder anderweitig abzudecken.Dokumente: http://getbootstrap.com/components/#navbar-fixed-bottom
quelle
navbar-static-bottom
.Ein funktionierendes Beispiel für Twitter Bootstrap NOT STICKY FOOTER
Version, die immer aktualisiert wird, wenn der Benutzer devtools öffnet oder die Fenstergröße ändert.
Sie benötigen mindestens ein Element mit einem
#footer
Wenn die Bildlaufleiste nicht angezeigt
werden soll, wenn der Inhalt zum Bildschirm passt, ändern Sie einfach den Wert von 10 in 0. Die Bildlaufleiste wird angezeigt, wenn der Inhalt nicht zum Bildschirm passt.
quelle
$('#footer').height();
mit$('#footer').outerHeight();
$(window).resize(function() {//main code goes here});
und rufen Sie$(window).resize();
auf, um ihn beim Laden der Seite festzulegen.So implementieren Sie dies auf der offiziellen Seite:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
Ich habe es gerade getestet und es funktioniert großartig! :) :)
HTML
Der relevante CSS-Code lautet:
quelle
Für Sticky Footer verwenden wir zwei
DIV's
in dem HTML - Code für grundlegenden sticky Footer - Effekt. Schreiben Sie so:HTML
CSS
quelle
Viel einfacheres offizielles Beispiel: http://getbootstrap.com/examples/sticky-footer-navbar/
quelle
Nun, ich habe eine Mischung aus
navbar-inner
und gefundennavbar-fixed-bottom
Es scheint gut und funktioniert für mich
Siehe Beispiel in Fiddle
quelle
In der neuesten Version von Bootstrap 4.3 kann dies mit
.fixed-bottom
class erfolgen.So verwende ich es mit der Fußzeile:
Sie finden weitere Informationen in der finden Position Dokumentation hier .
quelle
Die Antwort von HenryW ist gut, obwohl ich ein paar Verbesserungen brauchte, damit es so funktioniert, wie ich es wollte. Insbesondere wird auch Folgendes behandelt:
Folgendes hat bei diesen Optimierungen für mich funktioniert:
HTML:
CSS:
JavaScript:
quelle
Das hat bei mir perfekt funktioniert.
Fügen Sie diese Klasse navbar-fixed-bottom zu Ihrer Fußzeile hinzu.
Ich habe es so benutzt:
Und es setzt sich über die gesamte Breite nach unten.
Bearbeiten: Dadurch wird die Fußzeile so eingestellt, dass sie immer sichtbar ist. Dies müssen Sie berücksichtigen.
quelle
Sie müssen Ihr
.container-fluid
Div umschließen, damit Ihre klebrige Fußzeile funktioniert. Außerdem fehlen Ihnen einige Eigenschaften in Ihrer.wrapper
Klasse. Versuche dies:Entfernen Sie das
padding-top:70px
von Ihrembody
Tag und fügen Sie es in Ihr ein.container-fluid
stattdessen wie :Wir müssen das tun, weil wir das drücken
body
Taste nach unten, um die Navigationsleiste aufzunehmen, die Fußzeile etwas weiter (70 Pixel weiter) am Ansichtsfenster vorbei gedrückt wird, sodass eine Bildlaufleiste angezeigt wird. Wir erzielen bessere Ergebnisse, wenn wir.container-fluid
stattdessen die Div drücken .Als nächstes müssen wir die
.wrapper
Klasse außerhalb Ihres.container-fluid
Div entfernen und Ihre einwickeln#main
Div damit , wie folgt:Ihre Fußzeile muss natürlich außerhalb des
.wrapper
Divs sein, also entfernen Sie sie aus dem `.wrapper Div und platzieren Sie sie wie folgt draußen:Nachdem dies alles erledigt ist, schieben Sie Ihre Fußzeile ordnungsgemäß näher an Ihre
.wrapper
Klasse heran, indem Sie einen negativen Rand verwenden, wie folgt :Und das sollte funktionieren, obwohl Sie wahrscheinlich einige andere Dinge ändern müssen, damit es funktioniert, wenn die Größe des Bildschirms geändert wird, z. B. das Zurücksetzen der Höhe für die
.wrapper
Klasse:quelle
Dies ist der richtige Weg, um dies mit Twitter Bootstrap und der neuen Klasse "navbar-fixed-bottom" zu tun: (Sie haben keine Ahnung, wie lange ich danach gesucht habe)
CSS:
HTML:
quelle
Verwenden Sie die in Bootstrap 4 integrierten Flex-Dienstprogramme! Folgendes habe ich mir mit den meisten Bootstrap 4-Dienstprogrammen ausgedacht.
.d-flex
um den Hauptteil zu einem flexiblen Behälter zu machen.flex-column
auf der Hauptdiv, um Ihre Flex-Elemente in einer Spalte anzuordnenmin-height: 100vh
zum Hauptteil, entweder mit einem Stilattribut oder in Ihrem CSS, um das Ansichtsfenster vertikal zu füllen.flex-grow-1
Auf dem Container nimmt das Element, damit der Hauptinhaltscontainer den gesamten in der Höhe des Ansichtsfensters verbleibenden Platz einnimmt.quelle
min-height: 100vh
dermin-vh-100
Klasse von Bootstrap kann auch verwendet werden.Verwenden Sie die navbar-Komponente und fügen Sie die Klasse .navbar-fixed-bottom hinzu:
Körper hinzufügen
quelle
Verwenden Sie Folgendes, um Layouts mit Breitenbeschränkungen zu handhaben, damit Sie keine abgerundeten Ecken erhalten und Ihre Navigationsleiste bündig mit den Seiten der Anwendung abschließt
Anschließend können Sie die Bootstrap-Klassen mithilfe von CSS überschreiben, um Höhe, Schriftart und Farbe anzupassen
quelle
Sie können jQuery verwenden, um dies zu handhaben:
quelle
Der einzige, der für mich gearbeitet hat!:
quelle
Die einfachste Technik ist wahrscheinlich die Verwendung von Bootstrap
navbar-static-bottom
in Verbindung mit dem Festlegen des Hauptcontainer-Div mitheight: 100vh
(neuer Prozentsatz des CSS3- Ansichtsports ). Dadurch wird die Fußzeile nach unten gespült.quelle
Getestet mit
Bootstrap 3.6.6
.HTML
CSS
quelle
Die Fußzeilenhöhe entspricht der Größe des unteren Einzugs des Wrap-Elements.
quelle
Hier ist eine Lösung für die neueste Version von Bootstrap (4.3 zum Zeitpunkt des Schreibens) mit Flexbox.
HTML:
CSS:
Und ein Codepen-Beispiel: https://codepen.io/tillytoby/pen/QPdomR
quelle
Gemäß dem Bootstrap 4.3-Beispiel funktioniert es tatsächlich so, wenn Sie wie ich Ihre geistige Gesundheit verlieren:
height: 100%
(h-100
Klasse) habendisplay: flex
(d-flex
Klasse) habenmargin-top: auto
(mt-auto
Klasse) habenDas Problem ist, dass wir in modernen Front-End-Frameworks häufig zusätzliche Wrapper um diese Elemente haben.
In meinem Fall habe ich beispielsweise mit Angular die Ansicht aus einem separaten App-Stammverzeichnis, einer Haupt-App-Komponente und einer Fußzeilen-Komponente zusammengestellt, die alle ihr benutzerdefiniertes Element zum DOM hinzugefügt haben.
Damit es funktioniert, musste ich diesen Wrapper-Elementen Klassen hinzufügen: eine zusätzliche
h-100
, died-flex
eine Ebene nach unten und diemt-auto
eine Ebene von der Fußzeile nach oben verschiebt (also ist es eigentlich nicht mehr in der Fußzeilenklasse, sondern in meiner<app-footer>
Gewohnheit Element).quelle
class="h-100"
auf den<html>
Tag setzen.Verwenden Sie diesen Code in Bootstrap, es funktioniert
quelle
Bootstrap v4 + Lösung
Hier ist eine Lösung, bei der weder die HTML-Struktur noch zusätzliche CSS-Tricks mit Padding überarbeitet werden müssen:
Beachten Sie, dass diese Lösung Fußzeilen mit flexiblen Höhen ermöglicht. Dies ist besonders praktisch, wenn Sie Seiten für mehrere Bildschirmgrößen entwerfen und den Inhalt beim Verkleinern umbrechen.
Warum das so ist
style="height:100%;"
Das<html>
Tag nimmt den gesamten Platz des Dokuments ein.d-flex
setztdisplay:flex
auf unser<body>
Tag.flex-column
setztflex-direction:column
auf unser<body>
Tag. Seine Kinder (<header>
,<main>
,<footer>
und andere direkte Kind) werden jetzt vertikal ausgerichtet.h-100
setztheight:100%
auf unser<body>
Tag, was bedeutet, dass es den gesamten Bildschirm vertikal abdeckt.flex-grow-1
setztflex-grow:1
auf unsere<main>
und weist sie effektiv an, den verbleibenden vertikalen Raum zu füllen. Dies entspricht der vertikalen Höhe von 100%, die wir zuvor für unser<body>
Tag festgelegt haben.Arbeitsdemo hier: https://codepen.io/maxencemaire/pen/VwvyRQB
Weitere Informationen zur Flexbox finden Sie unter https://css-tricks.com/snippets/css/a-guide-to-flexbox/ .
quelle
h-100
Klasse funktioniert nicht richtig, es ist besser zu verwendenmin-vh-100
.h-100
Klasse immer von der Höhe der übergeordneten Elemente abhängt und in einigen Fällen möglicherweise nicht richtig funktioniert. Da wir eine Fußzeile am unteren Rand des Ansichtsfensters wünschen, empfiehlt es sich, die Höhe des Ansichtsfensters zu verwenden.min-width
. Aus diesem Grund enthält dasHTML
Tagheight
100% im Code. Das Beispiel funktioniert und ich verstehe nicht, warum es die browserübergreifende Unterstützung für die CSS-height
Eigenschaft nicht geben würde , in die das Bootstrap-Snippet letztendlich übersetzt wird.HTML
Tag. In meinem Fall hat Ihre Lösung nicht funktioniert, da ich den Stil imHTML
Tag nicht bevorzuge . Und ich möchte nicht, dass dasbody
Tag von einem anderen Elternteil abhängt, sondern von einem Ansichtsfenster. Sie müssen nicht setzenstyle="height:100%;"
undh-100
gleichzeitig. Das Anbringenmin-vh-100
am Körper erledigt einfach den Job und weniger Code.Es sieht so aus, als würde die
height:100%
'Kette' gebrochendiv#main
. Versuchen Sie es zu ergänzenheight:100%
, und das könnte Sie Ihrem Ziel näher bringen.quelle
Hier finden Sie den Ansatz in HAML ( http://haml.info ) mit Navigationsleiste oben und Fußzeile unten auf der Seite:
quelle
Halte es einfach.
Möglicherweise müssen Sie auch die Höhe der Fußzeile versetzen, indem Sie der Fußzeile ein
margin-bottom
Äquivalent zur Fußzeilenhöhe hinzufügenbody
.quelle
Hier ist ein Beispiel mit css3:
CSS:
HTML:
Geige
quelle
So macht es Bootstrap:
http://getbootstrap.com/2.3.2/examples/sticky-footer.html
Verwenden Sie einfach die Seitenquelle und Sie sollten in der Lage sein zu sehen. Vergessen Sie nicht
<div id="wrap">
die Spitze.quelle
Eine weitere mögliche Lösung, bei der nur Medienabfragen verwendet werden
quelle