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

Gemäß der Bootstrap 4.3 Beispiel Für den Fall, dass Sie wie ich den Verstand verlieren: So funktioniert es tatsächlich:

• Alle Eltern der Fußzeile div müssen height: 100% ( h-100 Klasse)
• Der direkte Elternteil der Fußzeile muss display: flex ( d-flex Klasse)
• Die Fußzeile muss Folgendes enthalten margin-top: auto ( mt-auto Klasse)

Das Problem ist, dass wir in modernen Front-End-Frameworks oft zusätzliche Wrapper um diese Elemente herum haben.

In meinem Fall habe ich zum Beispiel mit Angular die Ansicht aus einer separaten App Root, einer App-Hauptkomponente und einer Footer-Komponente zusammengesetzt - die alle ihr eigenes Element zum DOM hinzugefügt haben.

Damit das funktioniert, musste ich diesen Wrapper-Elementen Klassen hinzufügen: eine zusätzliche h-100 , das Verschieben der d-flex eine Ebene nach unten, und das Verschieben der mt-auto eine Ebene höher als die Fußzeile (sie befindet sich also nicht mehr in der Fußzeilen-Klasse, sondern in meiner <app-footer> benutzerdefiniertes Element).

Answer 2

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

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

Körper hinzufügen

  { padding-bottom: 70px; }

Answer 3

Für Layouts mit Breitenbeschränkung verwenden Sie Folgendes, damit Sie keine abgerundeten Ecken erhalten und Ihre Navigationsleiste bündig mit den Seiten der Anwendung abschließt

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

dann können Sie css verwenden, um die Bootstrap-Klassen außer Kraft zu setzen, 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;
    }

Answer 4

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

Answer 5

Die einfachste Technik ist wahrscheinlich die Verwendung von Bootstrap navbar-static-bottom in Verbindung mit dem Setzen des Haupt-Container-Divs mit height: 100vh (neue CSS3 Port-Prozentsatz anzeigen ). Dadurch wird die Fußzeile nach unten gebündelt.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>