Sticky Footer, Five Ways

Der Zweck eines "Sticky Footers" ist, dass er am unteren Rand des Browserfensters "klebt". Aber nicht immer, wenn genügend Inhalt auf der Seite vorhanden ist, um den Footer nach unten zu schieben, tut er das immer noch. Aber wenn der Inhalt auf der Seite kurz ist, hängt ein Sticky Footer immer noch am unteren Rand des Browserfensters.

Beachten Sie, dass "sticky" hier genau wie oben beschrieben ist. Es darf nicht mit position: fixed; verwechselt werden, das verwendet werden kann, um ein Element an Ort und Stelle zu "kleben", auch wenn die Seite scrollt. Oder, noch verwirrender, es ist auch nicht position: sticky;, das wie eine feste Positionierung innerhalb von Containern ist.

Es gibt negative untere Ränder an Wrappern

Es gab ein umgebendes Element, das alles außer dem Footer enthielt. Es hatte einen negativen Rand, der der Höhe des Footers entsprach. Das war die Grundlage für dieses hier.

<body>
  <div class="wrapper">

      content

    <div class="push"></div>
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* Equal to height of footer */
  /* But also accounting for potential margin-bottom of last child */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

Siehe den Pen Sticky Footer mit calc(); von Chris Coyier (@chriscoyier) auf CodePen.

Diese Methode erforderte ein zusätzliches Element im Inhaltsbereich (das ".push"), um sicherzustellen, dass der negative Rand den Footer nicht nach oben zog und Inhalt überlagerte. Der Push war auch clever, weil er wahrscheinlich keinen eigenen unteren Rand hatte. Hätte er einen, hätte dieser in die negativen Ränder einbezogen werden müssen, und wenn diese beiden Zahlen nicht übereinstimmen, sieht es nicht ganz so gut aus.

Es gibt negative obere Ränder an Footern

Diese Technik erforderte kein zusätzliches Element, sondern ein zusätzliches umgebendes Element um den Inhalt, um eine passende untere Polsterung anzuwenden. Wiederum, um zu verhindern, dass der negative Rand den Footer über den Inhalt hebt.

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

Siehe den Pen Sticky Footer mit negativen Rändern 2 von Chris Coyier (@chriscoyier) auf CodePen.

Ein Wash zwischen dieser und der vorherigen Technik, da beide zusätzliche, ansonsten unnötige HTML-Elemente erfordern.

Es gibt calc() reduzierte Höhen-Wrapper

Eine Möglichkeit, keine zusätzlichen Elemente zu benötigen, ist die Anpassung der Wrapper-Höhe mit calc(). Dann gibt es keine Überlappung, nur zwei Elemente, die übereinander gestapelt sind und insgesamt 100 % Höhe ergeben.

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

Siehe den Pen Sticky Footer mit calc(); von Chris Coyier (@chriscoyier) auf CodePen.

Beachten Sie die 70px in calc() im Vergleich zur festen Höhe von 50px des Footers. Das ist eine Annahme. Eine Annahme, dass das letzte Element im Inhalt einen unteren Rand von 20px hat. Es ist dieser untere Rand plus die Höhe des Footers, die zusammen addiert werden müssen, um von der Viewport-Höhe abgezogen zu werden. Und ja, wir verwenden Viewport-Einheiten hier als einen weiteren kleinen Trick, um zu vermeiden, dass wir zuerst eine 100%ige Körperhöhe festlegen müssen, bevor wir eine 100%ige Wrapper-Höhe festlegen können.

Es gibt Flexbox

Das große Problem bei den oben genannten drei Techniken ist, dass sie feste Footer-Höhen erfordern. Feste Höhen sind im Webdesign generell ein Nachteil. Inhalte können sich ändern. Dinge sind flexibel. Feste Höhen sind normalerweise ein Warnsignal. Die Verwendung von Flexbox für einen Sticky Footer erfordert nicht nur keine zusätzlichen Elemente, sondern erlaubt auch einen variablen Footer.

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

Siehe den Pen Sticky Footer mit Flexbox von Chris Coyier (@chriscoyier) auf CodePen.

Sie könnten sogar einen Header darüber oder mehr darunter hinzufügen. Der Trick bei Flexbox ist entweder

flex: 1 auf dem Kindelement, das wachsen soll, um den Platz auszufüllen (der Inhalt in unserem Fall).
oder margin-top: auto, um das Kindelement so weit wie möglich vom Nachbarn wegzuschieben (oder in welche Richtung auch immer der Rand benötigt wird).

Denken Sie daran, wir haben eine vollständige Anleitung für all diese Flexbox-Sachen.

Es gibt Grid

Grid Layout ist noch neuer (und weniger verbreitet) als Flexbox. Wir haben eine vollständige Anleitung dafür. Man kann es auch ziemlich einfach für einen Sticky Footer verwenden.

<body>
  <div class="content">
    content
  </div>
  <footer class="footer"></footer>
</body>

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

Diese Demo sollte in Chrome Canary oder Firefox Developer Edition funktionieren und kann wahrscheinlich auf ältere Versionen von Grid Layout für Edge zurückportiert werden.

Siehe den Pen Sticky Footer mit Grid von Chris Coyier (@chriscoyier) auf CodePen.

Kommentare

Patrick Denny

# 25. Mai 2016

Das hat bei mir immer funktioniert. Die relative Positionierung des Körpers ist erforderlich, damit es funktioniert.

html { height: 100%; }
body {
    min-height:100%; 
    position:relative; 
    padding-bottom:[footer-height] 
}
.footer { 
    position: absolute; 
    left: 0 ; right: 0; bottom: 0; 
    height:[footer-height] 
}

Derek

Permalink zum Kommentar# 26. Mai 2016

Das Problem hier ist, dass es eine feste Höhe erfordert, um zu funktionieren. Wenn sich der Inhalt beim Ändern der Browsergröße umbricht oder wenn der Inhalt dynamisch hinzugefügt wird (möglicherweise unterschiedlicher Inhalt je nach Seite), funktionieren die festen Werte nicht.

Alexis

# 25. Mai 2016

Für das Flexbox-Beispiel können Sie auch vh-Einheiten verwenden, was geringfügig weniger Code ist.

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.content {
  flex: 1;
}

http://codepen.io/acordova/pen/WxepQb

Dies hängt natürlich von Ihrem Grad der Browserunterstützung ab. Aber es ist eine weitere Option! (Beachten Sie, dass, wenn Sie aus irgendeinem Grund einen Inhalts-Wrapper haben, den Sie nicht loswerden können – etwas, auf das ich gerade gestoßen bin, als ich in einer Ember-App gearbeitet habe – der body-Code auf diesem Wrapper sein sollte.)

Chris C

Permalink zum Kommentar# 25. Mai 2016

Ich denke, vw & vh-Einheiten funktionieren nicht auf frühem Android OS – ich bin mir nicht sicher, wie neuere funktionieren oder wie groß das Problem ist.
zzzzBov

Permalink zum Kommentar# 26. Mai 2016

vh und vw berücksichtigen keine Scrollbalken und auch nicht die gleitende Adressleiste im mobilen Safari. Ich empfehle, sie zu vermeiden.

SelenIT

# 25. Mai 2016

Lange vor Flexbox gab es auch eine Möglichkeit, einen Sticky Footer mit display:table und display: table-footer-group zu erstellen: http://codepen.io/SelenIT/pen/QELpww. Es hat einige Nachteile (z. B. benötigt es zusätzliche Wrapper nur zum Hinzufügen von Abständen), aber es wird bis IE8 unterstützt. Sollte es hier auch erwähnt werden?

bootsified

Permalink zum Kommentar# 25. Mai 2016

Wow… daran habe ich noch nie gedacht. Scheint ziemlich narrensicher zu sein. Blöd, dass man die Wrapper haben muss, aber ich mag es!
Alex McCabe

Permalink zum Kommentar# 26. Mai 2016

Das habe ich benutzt, bis ich zu Flexbox wechselte. Für Browser, die Flexbox nicht unterstützen, ist mir die Stickiness des Footers egal.

Thierry Koblentz

# 25. Mai 2016

Ich denke, wir können es ohne zusätzliches Element (ohne "push" oder "content-inside") machen.

http://codepen.io/thierry/pen/zBOZvz

wefwefewfewfew

# 25. Mai 2016

Sticky Footer mit display table-cell fehlt: https://gist.github.com/goldsky/7322156

mwitmer

Permalink zum Kommentar# 29. Mai 2016

Ja! display: table-cell; hat sich in meiner Arbeit als sehr effektive Technik für die meisten Situationen erwiesen. Ich bin sicher, mit der Zeit werde ich mich auf moderne Features verlassen, wenn wir uns von Legacy entfernen. Flexbox ist wirklich leistungsstark und kann auf vielfältige Weise eingesetzt werden – es ist erstaunlich. Auf jeden Fall ist dieser Beitrag eine großartige Sammlung von Methoden!

puglyfe

# 25. Mai 2016

Ich bevorzuge den Flexbox-Ansatz, wollte aber nur eine weitere Option hinzufügen…

Sticky Footer mit display: table-row

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: table;
  width: 100%;
}
.content {
  display: table-row;
  height: 100%;
  padding: 20px;
}
.footer {
  padding: 20px;
}

http://codepen.io/puglyfe/pen/QELpGy

mmcgu1966

# 25. Mai 2016

Ich benutze eine jQuery-Funktion, um dem Footer eine 'fixed'-Klasse hinzuzufügen, wenn die Inhalts-Höhe kleiner als die Seiten-Höhe ist. Einfach in die JS-Funktionen einfügen und keine zusätzliche Arbeit.
So sehr ich auch eine reine CSS-Lösung mag, sie hängt entweder von zusätzlicher Markup oder davon ab, dass der Seiteninhalt (window-height – footer-height) hat, und manchmal ist die Inhalts-Höhe viel kürzer.

svdvdsvdsvds

Permalink zum Kommentar# 25. Mai 2016

Diese Lösung ist ein Albtraum, wenn sich der Inhalt dynamisch ändert.

Brendan

# 25. Mai 2016

Vergessen Sie nicht position sticky! Es wäre eine ziemlich schreckliche Sache, die man für diesen Zweck in der Praxis verwenden könnte, aber sie funktioniert (irgendwie) – etwas, das man zur Liste hinzufügen kann.

(Demo funktioniert nur in Firefox oder Safari)
http://codepen.io/basement31/pen/bebqRd

Patrick Stephens

# 25. Mai 2016

Ich mag den Flexbox-Ansatz. Nur zur Information. Bei einem kürzlich durchgeführten Projekt habe ich versucht, die Höhe des Containers auf calc (100vh – 50px) zu setzen, und während es für Android und alle Desktop-Browser funktioniert, funktioniert es nicht auf iOS-Geräten. Das vh innerhalb von calc spezifisch. Sehr ärgerlich. Danke für die hilfreiche Vorstellung von flex: 1;

Brendan James Patterson

Permalink zum Kommentar# 25. Mai 2016

Seien Sie vorsichtig mit der Flex-Kurzform, verschiedene Browser (die zu unterschiedlichen Spezifikationen arbeiten, als sie ausgeliefert wurden) haben unterschiedliche Standardwerte https://github.com/philipwalton/flexbugs#6-the-default-flex-value-has-changed – Es ist sicherer, die Kurzform vorerst zu vermeiden (oder einen Mixin zu erstellen, der das für Sie erledigt).

Dies ist auch eine großartige Ressource für einige Crossbrowser-Flexbox-Probleme, von denen die meisten ziemlich triviale Workarounds haben.
https://github.com/philipwalton/flexbugs

Andrew

# 26. Mai 2016

Leider nicht Safari (Flex-Methode)

Kriesse

# 26. Mai 2016

Tolle Übersicht – aber die hier gezeigte Flex-Methode funktioniert browserübergreifend nicht wie erwartet. Das hat mich gerade gebissen, als ich mein aktuelles Projekt in IE11 geöffnet habe. Es gibt eine verbesserte, nur geringfügig komplexere Version von Phillip Walton, die für mich bisher gut funktioniert hat. Ich empfehle, das Beispiel hier ebenfalls zu aktualisieren (Code ganz unten): http://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/

Chris Coyier

# 26. Mai 2016

Aus dem von Kriesse verlinkten Philip-Artikel extrapoliert

.Site {
  display: flex;
  flex-direction: column;
  height: 100vh; /* Avoid the IE 10-11 `min-height` bug. */
}
.Site-header,
.Site-footer {
  flex-shrink: 0; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}
.Site-content {
  flex: 1 0 auto; /* Prevent Chrome, Opera, and Safari from letting these items shrink to smaller than their content's default minimum size. */
}

Cole Brown

Permalink zum Kommentar# 26. Mai 2016

Ich habe diese Kommentare gelesen, nur um zu sehen, ob jemand anderes darüber gepostet hat. Danke! Wir haben dieses Problem in unserem Projekt gelöst, nachdem wir versucht haben, einfach flex: 1; zu verwenden und Probleme in IE hatten. Die hier vorgeschlagene Lösung hat für uns perfekt funktioniert.

Tracy

# 26. Mai 2016

Die Grid-Version funktioniert bei mir in Firefox Developer Edition, aber nicht in Chrome Canary, es sei denn, ich aktiviere das Flag für experimentelle Webplattformfunktionen.

Jenna

# 26. Mai 2016

Ich habe diese Lösung verwendet: http://blog.karenmenezes.com/2014/jan/14/ryan-faits-sticky-footer-responsive/
Sie berücksichtigt, dass die Höhe des Footers je nach Breite der Seite geändert werden kann. Nützlich für responsive Layouts und wenn Sie keine Flexbox verwenden können.

Reich

# 3. Juni 2016

Ich habe auch die Lösung von Frau Menezes verwendet, obwohl ich ihren Code modifiziert habe, um kein jQuery zu benötigen. Ich bin letztes Jahr zu einem responsiven Layout gewechselt, wollte aber eine vernünftige Erfahrung für ältere IE-Browser bieten, daher konnte ich keine Flexbox verwenden.

(function (document, window) {
    // function to keep the footer at the bottom of the browser's window
    // (if the window is greater than the page size - sticky footer)
    "use strict";

    var stickyFooter = function (footerID, pusherID, wrapperID) {

        function adjustFooterPusher() {
            var footerHeight = document.getElementById(footerID).clientHeight; // get the height of the footer

            // set the pusher div to the same height
            document.getElementById(pusherID).setAttribute("style", "height: " + footerHeight.toString() + "px");
            // set the bottom margin for the wrapper to neg footer height
            document.getElementById(wrapperID).setAttribute("style", "margin-bottom: -" + footerHeight.toString() + "px");
            window.console.log("Footer resize: " + footerHeight);
        }

        // Listen for the resize event and adjust the footer position
        if ("addEventListener" in window) {
            try {
                window.addEventListener("resize", adjustFooterPusher, false);
            } catch (e) {
                throw e; // Blackberry OS6 reportedly doesn't support eventListener
            }
        } else if ("attachEvent" in window) { // For IE 6, 7, & 8
            window.attachEvent("onresize", adjustFooterPusher);
        }
    };

    // Make the function accessible from the global scope
    window.stickyFooter = stickyFooter;

}(document, window));

var footerID = "footer",
    pusherID = "pusher",
    wrapperID = "wrapper";

window.stickyFooter(footerID, pusherID, wrapperID);

window.onload = function() {
    var footerHeight = document.getElementById(footerID).clientHeight;

    // Set the initial heights (not all browsers support triggering a resize (dispatchEvent), so
    // set the heights at the start and then let the stickyFooter function handle the resizes)
    document.getElementById(pusherID).setAttribute("style", "height: " + footerHeight.toString() + "px");
    document.getElementById(wrapperID).setAttribute("style", "margin-bottom: -" + footerHeight.toString() + "px");
};

Ich habe den negativen unteren Rand an den Wrapper gesetzt und die Höhe des Pusher in CSS auf die normale Höhe des Footers eingestellt, um eine große Höhenänderung meist zu vermeiden. Und ich benutze window.onload, um die Höhen beim ersten Mal einzustellen, um auf Bilder zu warten.

herrfischer

# 30. Mai 2016

Wenn Sie nur einen "visuellen" unteren Footer benötigen, geben Sie dem BODY die Hintergrundfarbe des FOOTERS und dem Inhalt die Hintergrundfarbe der Seite. http://codepen.io/herrfischer/pen/VjwVrP
In den meisten Fällen ist dies der beste Weg … für mich.

Konstantin

# 31. Mai 2016

Beispiel mit Flexbox funktioniert nicht in IE11 (Windows 7).

Nuno Arruda

# 2. Juni 2016

Das erinnert mich daran, wie ich einmal einen Sticky Footer wollte, der den Inhalt nicht überlagerte: http://stackoverflow.com/questions/30470296/how-to-avoid-an-unknown-height-sticky-footer-to-overlap-content-with-css-only

Für moderne Browser ist die flex-Lösung der richtige Weg, für ältere Browserunterstützung verwenden Sie die table-Lösung.

ctf0

# 4. Juli 2016

Falls Sie die genaue Höhe des Footers nicht kennen, können Sie ein einfaches JS wie dieses verwenden:

function footer() {
    $f = $('.footer').outerHeight(true);
    $('.main').css('min-height', "calc(100vh - " + $f + "px)");
}

Dieser Kommentarbereich ist geschlossen. Wenn Sie wichtige Informationen teilen möchten, kontaktieren Sie uns bitte.