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

Ich bin im Allgemeinen vertraut mit der Technik des Leerens einer Fußzeile mit CSS und dieser folgenden Vorgehensweise .

Aber ich habe einige Probleme damit, diesen Ansatz für Twitter Bootstrap zu verwenden, wahrscheinlich aufgrund der Tatsache, dass Twitter Bootstrap in der Natur reactjs. Mit Twitter Bootstrap kann ich nicht die Fußzeile auf den unteren Rand der Seite mit dem oben beschriebenen Blogpost beschrieben.

Gefunden die Schnipsel hier funktioniert wirklich gut für Bootstrap

Html:

Your content here

CSS:

 html, body { height: 100%; } #wrap { min-height: 100%; } #main { overflow:auto; padding-bottom:150px; /* this needs to be bigger than footer height*/ } .footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both; padding-top:20px; } 

Quelle: Demo und Tutorial (nicht mehr verfügbar; RIP )

Dies ist jetzt in Bootstrap 2.2.1 enthalten.

Verwenden Sie die Navbar-Komponente und fügen .navbar-fixed-bottom class .navbar-fixed-bottom :

  

Vergessen Sie nicht, body { padding-bottom: 70px; } body { padding-bottom: 70px; } oder sonst kann der Seiteninhalt abgedeckt sein.

Dokumente: http://getbootstrap.com/components/#navbar-fixed-bottom

Ein Arbeitsbeispiel für Twitter bootstrap NICHT STICKY FOOTER

  

Du brauchst mindestens ein Element mit einem #footer

Wenn die Bildlaufleiste nicht benötigt wird, wenn der Inhalt auf den Bildschirm passt, ändern Sie einfach den Wert von 10 auf 0
Die Bildlaufleiste wird angezeigt, wenn der Inhalt nicht zum Bildschirm passt.

So können Sie dies von der offiziellen Seite implementieren:

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

Ich habe es gerade getestet und es funktioniert super! 🙂

HTML

   

Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

Der relevante CSS-Code ist dies:

 /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto !important; height: 100%; /* Negative indent footer by it's height */ margin: 0 auto -30px; } /* Set the fixed height of the footer here */ #push, #footer { height: 30px; } #footer { background-color: #f5f5f5; } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } 

Für Sticky Footer verwenden wir zwei DIV's im HTML-Format für den grundlegenden Sticky-Footer- Effekt. Schreibe so:

HTML

 

CSS

 body,html { height:100%; } .container { min-height:100%; } .footer { height:40px; margin-top:-40px; } 

Viel einfacheres offizielles Beispiel: http://getbootstrap.com/examples/sticky-footer-navbar/

 html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; background-color: #f5f5f5; } 

Nun, ich fand eine Mischung aus navbar-inner navbar-fixed-bottom und navbar-fixed-bottom

  

Es scheint gut und funktioniert für mich

Bildbeschreibung hier eingeben

Siehe Beispiel in Fiddle

Das hat für mich perfekt funktioniert.

Fügen Sie diese class navbar-fixed-bottom zu Ihrer Fußzeile hinzu.

  

Ich habe es so benutzt:

  

Und es setzt sich über die volle Breite nach unten.

Bearbeiten: Dadurch wird Fußzeile immer sichtbar, es ist etwas, was Sie berücksichtigen müssen.

Sie müssen Ihr .container-fluid div .container-fluid , damit Ihre sticky footer funktioniert. Ihnen fehlen auch einige Eigenschaften Ihrer .wrapper class. Versuche dies:

Entferne das padding-top:70px von deinem body Tag und .container-fluid stattdessen in deine .container-fluid :

 .wrapper > .container-fluid { padding-top: 70px; } 

Wir müssen dies tun, da wir den body unten drücken, um die Navigationsleiste unterzubringen, und die Fußzeile ein wenig weiter (70 Pixel weiter) über das Ansichtsfenster schieben, so dass wir eine Bildlaufleiste erhalten. Wir .container-fluid bessere Ergebnisse, .container-fluid wir stattdessen den .container-fluid div drücken.

Als nächstes müssen wir die .wrapper class außerhalb Ihres .container-fluid .wrapper entfernen und Ihr #main div damit wie #main :

 
...

Deine Fußzeile muss natürlich aus dem .wrapper div sein, also entferne sie aus dem `.wrapper div und lege sie nach draussen, so:

 
....
....

Nachdem Sie alles erledigt haben, schieben Sie Ihre Fußzeile näher an Ihre .wrapper class .wrapper , indem Sie einen negativen Rand verwenden, etwa so:

 .wrapper { min-height: 100%; height: auto !important; /* ie7 fix */ height: 100%; margin: 0 auto -43px; } 

Und das sollte funktionieren, obwohl Sie wahrscheinlich einige andere Dinge ändern müssen, damit es funktioniert, wenn der Bildschirm in der Größe .wrapper wird, wie zum Beispiel das Zurücksetzen der Höhe der .wrapper class:

 @media (max-width:480px) { .wrapper { height:auto; } } 

Dies ist der richtige Weg, um es mit Twitter Bootstrap und der neuen navbar-fixed-Bottom-class zu tun: (Sie haben keine Ahnung, wie lange ich nach dem gesucht habe)

CSS:

 html { position: relative; min-height: 100%; } #content { padding-bottom: 50px; } #footer .navbar{ position: absolute; } 

HTML:

   
...

HenryWs Antwort ist gut, obwohl ich ein paar Verbesserungen brauchte, damit es funktionierte, wie ich es wollte. Insbesondere behandelt das Folgende auch:

  • Vermeiden Sie die “Sprunghaftigkeit” beim Laden der Seite, indem Sie sie zunächst unsichtbar markieren und in JavaScript sichtbar machen
  • Der Umgang mit Browser ändert sich in der Größe
  • Außerdem wird die Fußzeile auf die Seite zurückgesetzt, wenn der Browser kleiner wird und die Fußzeile größer als die Seite wird
  • Höhenfunktion optimiert

Hier ist, was mit diesen Verbesserungen für mich funktionierte:

HTML:

  

CSS:

 #footer { padding-bottom: 30px; } 

JavaScript:

 function setFooterStyle() { var docHeight = $(window).height(); var footerHeight = $('#footer').outerHeight(); var footerTop = $('#footer').position().top + footerHeight; if (footerTop < docHeight) { $('#footer').css('margin-top', (docHeight - footerTop) + 'px'); } else { $('#footer').css('margin-top', ''); } $('#footer').removeClass('invisible'); } $(document).ready(function() { setFooterStyle(); window.onresize = setFooterStyle; }); 

In der neuesten Version von Bootstrap 4-Alpha konnte ich das mit der .fixed-bottom class machen.

 

Hier ist, wie ich es mit der Fußzeile verwende:

 

© 2017 Company, Inc.

Weitere Informationen finden Sie in der Vermittlungsdokumentation hier .

Verwenden Sie die Navbar-Komponente und fügen Sie die class .navbar-fixed-bottom hinzu:

  

Körper hinzufügen

  { padding-bottom: 70px; } 

Um Layouts mit Breiteneinschränkungen zu behandeln, verwenden Sie Folgendes, damit Sie keine abgerundeten Ecken erhalten und die Navigationsleiste bündig mit den Seiten der Anwendung abschließt

  

Dann können Sie CSS verwenden, um die Bootstrap-classn zu überschreiben, um Höhe, Schriftart und Farbe anzupassen

  .navbar-fixed-bottom { font-size: 12px; line-height: 18px; } .navbar-fixed-bottom .navbar-inner { min-height: 22px; } .navbar-fixed-bottom .p { margin: 2px 0 2px; } 

Sie können jQuery verwenden, um dies zu handhaben:

 $(function() { /** * Read the size of the window and reposition the footer at the bottom. */ var stickyFooter = function(){ var pageHeight = $('html').height(); var windowHeight = $(window).height(); var footerHeight = $('footer').outerHeight(); // A footer with 'fixed-bottom' has the CSS attribute "position: absolute", // and thus is outside of its container and counted in $('html').height(). var totalHeight = $('footer').hasClass('fixed-bottom') ? pageHeight + footerHeight : pageHeight; // If the window is larger than the content, fix the footer at the bottom. if (windowHeight >= totalHeight) { return $('footer').addClass('fixed-bottom'); } else { // If the page content is larger than the window, the footer must move. return $('footer').removeClass('fixed-bottom'); } }; // Call when this script is first loaded. window.onload = stickyFooter; // Call again when the window is resized. $(window).resize(function() { stickyFooter(); }); }); 

Die einfachste Methode ist wahrscheinlich Bootstrap navbar-static-bottom in Verbindung mit dem Festlegen des height: 100vh div mit der height: 100vh (neuer CSS3- height: 100vh ). Dadurch wird die Fußzeile nach unten gespült.

 
some content

Getestet mit Bootstrap 3.6.6 .

HTML

  

CSS

 .footer { bottom: 0; position: absolute; } 
 #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 der unteren Einrückung des Wrap-Elements.

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

Der einzige, der für mich funktioniert hat !:

 html { position: relative; min-height: 100%; padding-bottom:90px; } body { margin-bottom: 90px; } footer { position: absolute; bottom: 0; width: 100%; height: 90px; } 

Es sieht wie die height:100% ‘Kette’ wird an div#main gebrochen. Versuchen Sie, height:100% hinzuzufügen height:100% und das bringt Sie vielleicht näher an Ihr Ziel.

Hier finden Sie die Vorgehensweise in HAML ( http://haml.info ) mit Navigationsleiste oben und unten am Ende der Seite:

 %body #main{:role => "main"} %header.navbar.navbar-fixed-top %nav.navbar-inner .container /HEADER .container /BODY %footer.navbar.navbar-fixed-bottom .container .row /FOOTER 

Halte es einfach.

 footer { bottom: 0; position: absolute; } 

Möglicherweise müssen Sie auch die Höhe der Fußzeile versetzen, indem Sie dem body einen margin-bottom hinzufügen, der der Fußhöhe entspricht.

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:

 
body content....
footer content....

Geige

So macht es der 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. Vergesst nicht das

oben.

eine andere mögliche Lösung, nur Medienabfragen verwenden

 @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; } } 

Verwenden Sie die folgende class, um sie zur letzten Zeile der Seite zu verschieben und sie auch in die Mitte der Seite zu setzen. Wenn Sie die HAML-Seite von ruby ​​on rails verwenden, können Sie den folgenden Code verwenden. %footer.card.text-center

Bitte vergessen Sie nicht, Twitter Bootstrapp zu verwenden