Ich habe ein einfaches zweispaltiges Layout mit einer Fußzeile, die sowohl das rechte als auch das linke Div in meinem Markup löscht. Mein Problem ist, dass ich die Fußzeile nicht in allen Browsern am Ende der Seite halten kann. Es funktioniert, wenn der Inhalt die Fußzeile nach unten drückt, aber das ist nicht immer der Fall.

So erhalten Sie eine klebrige Fußzeile:

1. Haben Sie ein <div>mit class="wrapper"für Ihren Inhalt.

2. Kurz vor der Schließung </div>des wrapperPlatzes die <div class="push"></div>.

3. Gleich nach der Schließung </div>des wrapperPlatzes die <div class="footer"></div>.

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .push {
    height: 142px; /* .push must be the same height as .footer */
}

Verwenden Sie CSS vh-Einheiten!

Der wahrscheinlich naheliegendste und nicht hackigste Weg, um eine klebrige Fußzeile zu erstellen, wäre die Verwendung der neuen CSS-Ansichtsfenstereinheiten .

Nehmen Sie zum Beispiel das folgende einfache Markup:

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

Wenn die Kopfzeile 80 Pixel hoch und die Fußzeile 40 Pixel hoch ist, können wir unsere klebrige Fußzeile mit einer einzigen Regel für den Inhaltsbereich erstellen:

.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
}

Das heißt: Die Höhe des Inhalts div muss mindestens 100% der Höhe des Ansichtsfensters abzüglich der kombinierten Höhen von Kopf- und Fußzeile betragen.

Das ist es.

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">This page has little content</div>
<footer>This is my footer</footer>

... und so funktioniert derselbe Code mit vielen Inhalten im Inhaltsbereich:

* {
    margin:0;
    padding:0;
}
header {
    background: yellow;
    height: 80px;
}
.content {
    min-height: calc(100vh - 120px);
    /* 80px header + 40px footer = 120px  */
    background: pink;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
<footer>
    This is my footer
</footer>

NB:

1) Die Höhe der Kopf- und Fußzeile muss bekannt sein

2) Alte Versionen von IE (IE8-) und Android (4.4-) unterstützen keine Ansichtsfenstereinheiten. ( caniuse )

3) Es war einmal ein Problem mit Webport-Einheiten innerhalb einer Berechnungsregel. Dies wurde tatsächlich behoben ( siehe hier ), so dass es dort kein Problem gibt. Wenn Sie jedoch aus irgendeinem Grund die Verwendung von calc vermeiden möchten, können Sie dies umgehen, indem Sie negative Ränder verwenden und mit Box-Sizing auffüllen -

Wie so:

* {
    margin:0;padding:0;
}
header {
    background: yellow;
    height: 80px;
    position:relative;
}
.content {
    min-height: 100vh;
    background: pink;
    margin: -80px 0 -40px;
    padding: 80px 0 40px;
    box-sizing:border-box;
}
footer {
    height: 40px;
    background: aqua;
}

<header>header goes here</header>
<div class="content">Lorem ipsum 
</div>
<footer>
    This is my footer
</footer>

Klebrige Fußzeile mit display: flex

Lösung inspiriert von Philip Waltons klebriger Fußzeile .

Erläuterung

Diese Lösung gilt nur für :

• Chrome ≥ 21,0
• Firefox ≥ 20,0
• Internet Explorer ≥ 10
• Safari ≥ 6.1

Es basiert auf der flexAnzeige und nutzt die flex-growEigenschaft, die es einem Element ermöglicht, entweder in der Höhe oder in der Breite zu wachsen (wenn das auf eines oder jeweils eingestellt ist), um den zusätzlichen Platz im Container zu belegen.flow-directioncolumnrow

Wir werden uns Hebelwirkung auch die vhEinheit, wo 1vhwird wie definiert :

1/100 der Höhe des Ansichtsfensters

Daher ist eine Höhe 100vheine präzise Möglichkeit, einem Element mitzuteilen, dass es die gesamte Höhe des Ansichtsfensters überspannen soll.

So würden Sie Ihre Webseite strukturieren:

----------- body -----------
----------------------------

---------- footer ----------
----------------------------

Damit die Fußzeile am unteren Rand der Seite bleibt, soll der Abstand zwischen Körper und Fußzeile so groß werden, wie es erforderlich ist, um die Fußzeile am unteren Rand der Seite zu verschieben.

Daher wird unser Layout:

----------- body -----------
----------------------------

---------- spacer ----------
                             <- This element must grow in height
----------------------------

---------- footer ----------
----------------------------

Implementierung

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

.spacer {
    flex: 1;
}

/* make it visible for the purposes of demo */
.footer {
    height: 50px;
    background-color: red;
}

<body>
    <div class="content">Hello World!</div>
    <div class="spacer"></div>
    <footer class="footer"></footer>
</body>

Sie können damit bei der JSFiddle spielen .

Safari-Macken

Beachten Sie, dass Safari eine fehlerhafte Implementierung der flex-shrinkEigenschaft aufweist , die es Elementen ermöglicht, mehr als die Mindesthöhe zu verkleinern, die zum Anzeigen des Inhalts erforderlich wäre. Um dieses Problem zu beheben, müssen Sie die flex-shrinkEigenschaft explizit auf 0 .contentund footerim obigen Beispiel setzen:

.content { flex-shrink: 0; }
.footer  { flex-shrink: 0; }

Sie können position: absoluteFolgendes verwenden, um die Fußzeile am Ende der Seite zu platzieren. Stellen Sie dann jedoch sicher, dass Ihre margin-bottombeiden Spalten über die entsprechenden Spalten verfügen, damit sie nicht von der Fußzeile verdeckt werden.

#footer {
    position: absolute;
    bottom: 0px;
    width: 100%;
}
#content, #sidebar { 
    margin-bottom: 5em; 
}

Hier ist eine Lösung mit jQuery, die wie ein Zauber funktioniert. Es wird geprüft, ob die Höhe des Fensters größer als die Höhe des Körpers ist. Wenn dies der Fall ist, wird der Rand der Fußzeile geändert, um dies auszugleichen. Getestet in Firefox, Chrome, Safari und Opera.

$( function () {

    var height_diff = $( window ).height() - $( 'body' ).height();
    if ( height_diff > 0 ) {
        $( '#footer' ).css( 'margin-top', height_diff );
    }

});

Wenn Ihre Fußzeile bereits einen Rand oben hat (z. B. 50 Pixel), müssen Sie den letzten Teil ändern für:

css( 'margin-top', height_diff + 50 )

Stellen Sie das CSS für Folgendes ein #footer:

position: absolute;
bottom: 0;

Sie müssen dann ein paddingoder marginan der Unterseite Ihres hinzufügen #sidebarund #contentum die Höhe von #footeroder wenn sie sich überlappen, übereinstimmen , #footerwerden sie abgedeckt.

Wenn ich mich richtig erinnere, hat IE6 auch ein Problem mit dem bottom: 0CSS. Möglicherweise müssen Sie eine JS-Lösung für IE6 verwenden (wenn Sie sich für IE6 interessieren).

Eine ähnliche Lösung wie @gcedo, jedoch ohne dass ein Zwischeninhalt hinzugefügt werden muss, um die Fußzeile nach unten zu drücken. Wir können einfach margin-top:autozur Fußzeile hinzufügen und sie wird unabhängig von ihrer Höhe oder der Höhe des obigen Inhalts an den unteren Rand der Seite verschoben.

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

.content {
  padding: 50px;
  background: red;
}

.footer {
  margin-top: auto;
  padding:10px;
  background: green;
}

<div class="content">
  some content here
</div>
<footer class="footer">
  some content
</footer>

index.html:

<!DOCTYPE html>

<html>
 <head>
   <link rel="stylesheet" type="text/css" href="main.css" />
 </head>

<body>
 <div id="page-container">
   <div id="content-wrap">
     <!-- all other page content -->
   </div>
   <footer id="footer"></footer>
 </div>
</body>

</html>

main.css:

#page-container {
  position: relative;
  min-height: 100vh;
}

#content-wrap {
  padding-bottom: 2.5rem;    /* Footer height */
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 2.5rem;            /* Footer height */
}

Quelle: https://www.freecodecamp.org/news/how-to-keep-your-footer-where-it-belongs-59c6aa05c59c/

Ich habe selbst manchmal damit zu kämpfen gehabt und immer festgestellt, dass die Lösung mit all diesen Divs ineinander eine chaotische Lösung war. Ich habe nur ein bisschen rumgespielt und persönlich herausgefunden, dass dies funktioniert und es sicherlich eine der einfachsten Möglichkeiten ist:

html {
    position: relative;
}

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

footer {
    position: absolute;
    bottom: 0;
}

Was mir daran gefällt, ist, dass kein zusätzliches HTML angewendet werden muss. Sie können dieses CSS einfach hinzufügen und dann Ihren HTML-Code wie immer schreiben

Da die Grid- Lösung noch nicht vorgestellt wurde, ist es hier mit nur zwei Deklarationen für das übergeordnete Element , wenn wir das height: 100%und margin: 0als selbstverständlich betrachten:

html, body {height: 100%}

body {
  display: grid; /* generates a block-level grid */
  align-content: space-between; /* places an even amount of space between each grid item, with no space at the far ends */
  margin: 0;
}

.content {
  background: lightgreen;
  /* demo / for default snippet window */
  height: 1em;
  animation: height 2.5s linear alternate infinite;
}

footer {background: lightblue}

@keyframes height {to {height: 250px}}

<div class="content">Content</div>
<footer>Footer</footer>

• align-content: space-between

Die Elemente sind innerhalb des Ausrichtungsbehälters entlang der Querachse gleichmäßig verteilt. Der Abstand zwischen jedem Paar benachbarter Elemente ist gleich. Das erste Element ist bündig mit der Hauptstartkante und das letzte Element ist bündig mit der Hauptendekante.

CSS:

  #container{
            width: 100%;
            height: 100vh;
            }
 #container.footer{
            float:left;
            width:100%;
            height:20vh;
            margin-top:80vh;
            background-color:red;
            }

HTML:

           <div id="container">
               <div class="footer">
               </div>
           </div>

Dies sollte den Trick tun, wenn Sie nach einer reaktionsschnellen Fußzeile suchen, die am unteren Rand der Seite ausgerichtet ist und immer einen oberen Rand von 80% der Höhe des Ansichtsfensters beibehält.

Verwenden Sie die absolute Positionierung und den Z-Index, um mit den folgenden Schritten ein klebriges Fußzeilendiv bei jeder Auflösung zu erstellen:

• Erstellen Sie eine Fußzeile div mit position: absolute; bottom: 0; und der gewünschten Höhe
• Stellen Sie den Abstand der Fußzeile so ein, dass zwischen dem unteren und dem unteren Fensterbereich Leerzeichen eingefügt werden
• Erstellen Sie einen Container div, der den Body-Inhalt umschließtposition: relative; min-height: 100%;
• Fügen Sie dem Hauptinhalt eine untere Polsterung hinzu div der Höhe plus Polsterung der Fußzeile entspricht
• Stellen Sie die z-indexFußzeile größer als den Container ein, divwenn die Fußzeile abgeschnitten ist

Hier ist ein Beispiel:

    <!doctype html>
    <html>
    <head>
      <title>Sticky Footer</title>
      <meta charset="utf-8">
      <style>
      .wrapper { position: relative; min-height: 100%; }
      .footer { position: absolute; bottom:0; width: 100%; height: 200px; padding-top: 100px; background-color: gray; }
      .column { height: 2000px; padding-bottom: 300px; background-color: green; }
     /* Set the `html`, `body`, and container `div` to `height: 100%` for IE6 */

      </style>
    </head>
    <body>
      <div class="wrapper">
        <div class="column">
          <span>hello</span>
        </div>
        <div class="footer">
          <p>This is a test. This is only a test...</p>
        </div>
      </div>
    </body>
    </html>

Bei dieser Frage sind viele der Antworten, die ich gesehen habe, klobig, schwer zu implementieren und ineffizient. Ich dachte, ich würde es versuchen und meine eigene Lösung finden, die nur ein kleines bisschen CSS und HTML ist

html,
body {
  height: 100%;
  margin: 0;
}
.body {
  min-height: calc(100% - 2rem);
  width: 100%;
  background-color: grey;
}
.footer {
  height: 2rem;
  width: 100%;
  background-color: yellow;
}

<body>
  <div class="body">test as body</div>
  <div class="footer">test as footer</div>
</body>

Dies funktioniert, indem Sie die Höhe der Fußzeile einstellen und dann mithilfe von CSS-Berechnung die Mindesthöhe der Seite ermitteln, wobei sich die Fußzeile noch unten befindet. Ich hoffe, dies hilft einigen Personen :)

Eine Lösung wäre, die Mindesthöhe für die Boxen einzustellen. Leider scheint es, dass es vom IE nicht gut unterstützt wird (Überraschung).

Keine dieser reinen CSS-Lösungen funktioniert ordnungsgemäß mit der dynamischen Größenänderung von Inhalten (zumindest unter Firefox und Safari), z. B. wenn Sie einen Hintergrund für die Container-Div, die Seite und dann die Größe der Tabelle (Hinzufügen einiger Zeilen) innerhalb der Div, der Der Tisch kann aus dem unteren Bereich des gestalteten Bereichs herausragen, dh Sie können die Hälfte des Tisches in Weiß auf Schwarz und die Hälfte des Tisches in Weiß haben, da sowohl die Schriftfarbe als auch die Hintergrundfarbe Weiß sind. Es ist im Grunde nicht mit den Rollerseiten zu reparieren.

Verschachteltes Div-Mehrspalten-Layout ist ein hässlicher Hack und das 100% minimale Body / Container-Div zum Festhalten der Fußzeile ist ein hässlicherer Hack.

Die einzige Lösung ohne Skript, die auf allen Browsern funktioniert, die ich ausprobiert habe: eine viel einfachere / kürzere Tabelle mit thead (für Kopfzeile) / tfoot (für Fußzeile) / tbody (td's für eine beliebige Anzahl von Spalten) und 100% Höhe. Dies hat jedoch semantische und SEO-Nachteile wahrgenommen (Fuß muss vor jedem erscheinen. ARIA-Rollen können jedoch anständigen Suchmaschinen helfen).

Mehrere Leute haben hier oben die Antwort auf dieses einfache Problem gegeben, aber ich muss noch etwas hinzufügen, wenn man bedenkt, wie frustriert ich war, bis ich herausgefunden habe, was ich falsch gemacht habe.

Wie bereits erwähnt, ist der einfachste Weg, dies zu tun, derselbe.

html {
    position: relative;
    min-height: 100%;
}

body {
    background-color: transparent;
    position: static;
    height: 100%;
    margin-bottom: 30px;
}

.site-footer {
    position: absolute;
    height: 30px;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

Die Eigenschaft, die in Posts nicht erwähnt wird, vermutlich weil sie normalerweise Standard ist, ist jedoch die Position: statisch auf dem Body-Tag. Positionsrelativ funktioniert nicht!

Mein WordPress-Thema hatte die Standard-Körperanzeige überschrieben und es verwirrte mich für eine widerlich lange Zeit.

Ein alter Thread, den ich kenne, aber wenn Sie nach einer reaktionsschnellen Lösung suchen, hilft dieser jQuery-Zusatz:

$(window).on('resize',sticky);
$(document).bind("ready", function() {
   sticky();
});

function sticky() {
   var fh = $("footer").outerHeight();
   $("#push").css({'height': fh});
   $("#wrapper").css({'margin-bottom': -fh});
}

Eine vollständige Anleitung finden Sie hier: https://pixeldesigns.co.uk/blog/responsive-jquery-sticky-footer/

Ich habe eine sehr einfache Bibliothek https://github.com/ravinderpayal/FooterJS erstellt

Es ist sehr einfach zu bedienen. Rufen Sie nach dem Einfügen der Bibliothek einfach diese Codezeile auf.

footer.init(document.getElementById("ID_OF_ELEMENT_CONTAINING_FOOTER"));

Fußzeilen können dynamisch geändert werden, indem die obige Funktion mit unterschiedlichen Parametern / IDs aufgerufen wird.

footer.init(document.getElementById("ID_OF_ANOTHER_ELEMENT_CONTAINING_FOOTER"));

Hinweis: - Sie müssen kein CSS ändern oder hinzufügen. Die Bibliothek ist dynamisch, was bedeutet, dass selbst wenn die Größe des Bildschirms nach dem Laden der Seite geändert wird, die Position der Fußzeile zurückgesetzt wird. Ich habe diese Bibliothek erstellt, weil CSS das Problem für eine Weile löst, aber wenn sich die Größe der Anzeige erheblich ändert, von Desktop zu Tablet oder umgekehrt, überlappen sie entweder den Inhalt oder bleiben nicht länger klebrig.

Eine andere Lösung sind CSS-Medienabfragen. Sie müssen jedoch manuell verschiedene CSS-Stile für unterschiedliche Bildschirmgrößen schreiben, während diese Bibliothek ihre Arbeit automatisch erledigt und von allen grundlegenden JavaScript-unterstützenden Browsern unterstützt wird.

CSS-Lösung bearbeiten :

@media only screen and (min-height: 768px) {/* or height/length of body content including footer*/
    /* For mobile phones: */
    #footer {
        width: 100%;
        position:fixed;
        bottom:0;
    }
}

Wenn die Höhe der Anzeige jetzt größer als Ihre Inhaltslänge ist, wird die Fußzeile auf den unteren Rand festgelegt. Wenn nicht, wird sie automatisch ganz am Ende der Anzeige angezeigt, wenn Sie einen Bildlauf durchführen müssen, um dies anzuzeigen.

Und es scheint eine bessere Lösung zu sein als JavaScript / Bibliothek.

Ich hatte vorher kein Glück mit den auf dieser Seite vorgeschlagenen Lösungen, aber schließlich funktionierte dieser kleine Trick. Ich werde es als eine andere mögliche Lösung aufnehmen.

footer {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1rem;
  background-color: #efefef;
  text-align: center;
}

Flexbox-Lösung

Das Flex-Layout wird für natürliche Kopf- und Fußzeilenhöhen bevorzugt. Diese Flex-Lösung wird in modernen Browsern getestet und funktioniert tatsächlich :) in IE11.

Siehe JS Fiddle .

HTML

<body>
  <header>
    ...
  </header>
  <main>
    ...
  </main>
  <footer>
    ...
  </footer>
</body>  

CSS

html {
  height: 100%;
}

body {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0;
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
  flex-shrink: 0;
}

header,
footer {
  flex: none;
}

Für mich ist die schönste Art, es anzuzeigen (die Fußzeile), am unteren Rand zu bleiben, aber nicht immer den Inhalt abzudecken:

#my_footer {
    position: static
    fixed; bottom: 0
}

jQuery CROSS BROWSER CUSTOM PLUGIN - $ .footerBottom ()

Oder verwenden Sie jQuery wie ich und stellen Sie Ihre Fußzeilenhöhe auf autooder auf einfix , was auch immer Sie möchten, es wird trotzdem funktionieren. Dieses Plugin verwendet jQuery-Selektoren. Damit es funktioniert, müssen Sie die jQuery-Bibliothek in Ihre Datei aufnehmen.

So führen Sie das Plugin aus. Importieren Sie jQuery, kopieren Sie den Code dieses benutzerdefinierten jQuery-Plugins und importieren Sie ihn nach dem Import von jQuery! Es ist sehr einfach und grundlegend, aber wichtig.

Wenn Sie dies tun, müssen Sie nur diesen Code ausführen:

$.footerBottom({target:"footer"}); //as html5 tag <footer>.
// You can change it to your preferred "div" with for example class "footer" 
// by setting target to {target:"div.footer"}

Es ist nicht erforderlich, es in das Dokument Ready-Ereignis einzufügen. Es wird gut laufen wie es ist. Die Position Ihrer Fußzeile wird neu berechnet, wenn die Seite geladen wird und die Größe des Fensters geändert wird.

Hier ist der Code des Plugins, den Sie nicht verstehen müssen. Wissen Sie einfach, wie Sie es implementieren. Es macht den Job für Sie. Wenn Sie jedoch wissen möchten, wie es funktioniert, schauen Sie sich einfach den Code an. Ich habe Kommentare für Sie hinterlassen.

//import jQuery library before this script

// Import jQuery library before this script

// Our custom jQuery Plugin
(function($) {
  $.footerBottom = function(options) { // Or use "$.fn.footerBottom" or "$.footerBottom" to call it globally directly from $.footerBottom();
    var defaults = {
      target: "footer",
      container: "html",
      innercontainer: "body",
      css: {
        footer: {
          position: "absolute",
          left: 0,
          bottom: 0,
        },

        html: {
          position: "relative",
          minHeight: "100%"
        }
      }
    };

    options = $.extend(defaults, options);

    // JUST SET SOME CSS DEFINED IN THE DEFAULTS SETTINGS ABOVE
    $(options.target).css({
      "position": options.css.footer.position,
      "left": options.css.footer.left,
      "bottom": options.css.footer.bottom,
    });

    $(options.container).css({
      "position": options.css.html.position,
      "min-height": options.css.html.minHeight,
    });

    function logic() {
      var footerOuterHeight = $(options.target).outerHeight(); // Get outer footer height
      $(options.innercontainer).css('padding-bottom', footerOuterHeight + "px"); // Set padding equal to footer height on body element
      $(options.target).css('height', footerOuterHeight + "!important"); // Set outerHeight of footer element to ... footer
      console.log("jQ custom plugin footerBottom runs"); // Display text in console so ou can check that it works in your browser. Delete it if you like.
    };

    // DEFINE WHEN TO RUN FUNCTION
    $(window).on('load resize', function() { // Run on page loaded and on window resized
      logic();
    });

    // RETURN OBJECT FOR CHAINING IF NEEDED - IF NOT DELETE
    // return this.each(function() {
    //   this.checked = true;
    // });
    // return this;
  };
})(jQuery); // End of plugin


// USE EXAMPLE
$.footerBottom(); // Run our plugin with all default settings for HTML5

/* Set your footer CSS to what ever you like it will work anyway */
footer {
  box-sizing: border-box;
  height: auto;
  width: 100%;
  padding: 30px 0;
  background-color: black;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- The structure doesn't matter much, you will always have html and body tag, so just make sure to point to your footer as needed if you use html5, as it should just do nothing run plugin with no settings it will work by default with the <footer> html5 tag -->
<body>
  <div class="content">
  <header>
    <nav>
      <ul>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
        <li>link</li>
      </ul>
    </nav>
  </header>

  <section>
      <p></p>
      <p>Lorem ipsum...</p>
    </section>
  </div>
  <footer>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
    <p>Copyright 2009 Your name</p>
  </footer>

Die Flex-Lösungen haben bei mir so gut funktioniert, dass die Fußzeile klebrig wurde, aber leider haben sich einige unserer Seitenlayouts geändert, und nicht zum Besseren. Was bei mir endlich funktioniert hat war:

    jQuery(document).ready(function() {

    var fht = jQuery('footer').outerHeight(true);
    jQuery('main').css('min-height', "calc(92vh - " + fht + "px)");

});

Ich habe dies aus der Antwort von ctf0 unter https://css-tricks.com/couple-takes-sticky-footer/ erhalten.

Wenn Sie nicht möchten, dass die Position festgelegt ist und Sie auf dem Handy nervig verfolgen, scheint dies bisher für mich zu funktionieren.

html {
    min-height: 100%;
    position: relative;
}

#site-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 6px 2px;
    background: #32383e;
}

Stellen Sie einfach das HTML auf min-height: 100%;und position: relative;dann einposition: absolute; bottom: 0; left: 0; auf die Fußzeile. Ich habe dann sichergestellt, dass die Fußzeile das letzte Element im Körper ist.

Lassen Sie mich wissen, ob dies für andere nicht funktioniert und warum. Ich weiß, dass sich diese langwierigen Style-Hacks unter verschiedenen Umständen, an die ich nicht gedacht hatte, seltsam verhalten können.

Versuchen Sie, ein Container-Div (mit Überlauf: Auto) um den Inhalt und die Seitenleiste zu legen.

Wenn das nicht funktioniert, haben Sie Screenshots oder Beispiellinks, bei denen die Fußzeile nicht richtig angezeigt wird?