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

HenryWs Antwort ist gut, obwohl ich ein paar Anpassungen brauchte, damit es so funktioniert, wie ich es wollte. Insbesondere die folgenden Griffe auch:

• Vermeidung der "Sprunghaftigkeit" beim Laden der Seite, indem zunächst unsichtbar markiert und in Javascript sichtbar gemacht wird
• Angenehmer Umgang mit Größenänderungen im Browser
• Zusätzlich wird die Fußzeile wieder auf die Seite gesetzt, wenn der Browser kleiner wird und die Fußzeile größer als die Seite wird
• Optimierungen der Höhenfunktion

Mit diesen Änderungen hat es bei mir funktioniert:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

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

Answer 2

Das hat bei mir perfekt funktioniert.

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

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

Ich habe es so verwendet:

<div class="container-fluid footer navbar-fixed-bottom">
<!-- start footer -->
</div>

Und es setzt sich über die gesamte Breite nach unten fort.

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

Answer 3

Sie müssen Ihre .container-fluid div, damit Ihre klebrige Fußzeile funktioniert, fehlen Ihnen auch einige Eigenschaften in Ihrer .wrapper Klasse. Versuchen Sie dies:

Entfernen Sie die padding-top:70px von Ihrem body Tag und fügen Sie es in Ihre .container-fluid stattdessen, etwa so:

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

Wir müssen dies tun, weil das Drücken der body nach unten, um die Navigationsleiste unterzubringen endet schieben die Fußzeile ein bisschen weiter (70px weiter) über den Viewport, so dass wir eine Bildlaufleiste zu bekommen. Wir erhalten bessere Ergebnisse, wenn wir die .container-fluid div stattdessen.

Als nächstes müssen wir die .wrapper Klasse außerhalb Ihres .container-fluid div und verpacken Sie Ihre #main tauchen Sie damit auf, etwa so:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>  

Ihre Fußzeile muss natürlich außerhalb der .wrapper div, also entfernen Sie es aus dem `.wrapper div und platzieren Sie es außerhalb, wie folgt:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Nachdem das alles erledigt ist, schieben Sie Ihre Fußzeile näher an Ihre .wrapper Klasse, 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 ein paar andere Dinge ändern müssen, damit es funktioniert, wenn die Größe des Bildschirms geändert wird, wie das Zurücksetzen der Höhe der .wrapper Klasse, etwa so:

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

Answer 4

Dies ist der richtige Weg, um es mit Twitter Bootstrap und die neue navbar-fixed-bottom-Klasse zu tun: (Sie haben keine Ahnung, wie lange ich für diese Suche verbracht)

CSS:

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

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

Answer 5

Bootstrap v4+ Lösung

Hier ist eine Lösung, die kein Umdenken in der HTML-Struktur und keine zusätzlichen CSS-Tricksereien mit Auffüllungen erfordert:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Beachten Sie, dass diese Lösung Fußzeilen mit flexibler Höhe ermöglicht, was besonders praktisch ist, wenn Sie Seiten für mehrere Bildschirmgrößen entwerfen, bei denen der Inhalt beim Verkleinern umbrochen wird.

Warum das funktioniert

• style="height:100%;" macht die <html> Tag nimmt den gesamten Platz des Dokuments ein.
• Klasse d-flex setzt display:flex zu unserem <body> Tag.
• Klasse flex-column setzt flex-direction:column zu unserem <body> Tag. Seine Kinder ( <header> , <main> , <footer> und jedes andere direkte Kind) sind jetzt vertikal ausgerichtet.
• Klasse h-100 setzt height:100% zu unserem <body> Tag, d. h. es wird den gesamten Bildschirm vertikal abdecken.
• Klasse flex-grow-1 setzt flex-grow:1 zu unserem <main> und weist sie an, den verbleibenden vertikalen Raum auszufüllen, so dass die vertikale Höhe von 100 % erreicht wird, die wir zuvor in unserer <body> Tag.

Arbeitsdemo hier: https://codepen.io/maxencemaire/pen/VwvyRQB

Voir https://css-tricks.com/snippets/css/a-guide-to-flexbox/ für weitere Informationen über Flexbox.