Wie bringt man die Fußzeile dazu, am Ende einer Webseite zu bleiben?

291

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.

Bill die Eidechse
quelle
Ich werde @Jimmy hinzufügen: Sie müssen auch die absolute (oder relative) Positionierung für das Element deklarieren, das die Fußzeile enthält. In Ihrem Fall ist es das Körperelement. Bearbeiten: Ich habe es auf Ihrer Seite mit
Firebug
Möglicherweise müssen Sie die HTML-Seite auf volle Höhe strecken, wie dieser Link sagt: makandracards.com/makandra/…
sina

Antworten:

199

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 */
}
Staale
quelle
4
@jlp: Sie müssen das Formular-Tag zur Anweisung height: 100% hinzufügen, da sonst die klebrige Fußzeile beschädigt wird. So: html, body, form {height: 100%;}
dazbradbury
Ich bemerkte, dass das Hinzufügen von Polstern zur Fußzeile die Schrauben verschraubt, fand jedoch heraus, dass dies behoben werden kann, indem die zusätzliche Polsterung der Fußzeile von der Höhe {Fußzeile, Druck} abgezogen wird.
Nicooga
1
Die ausführliche Erklärung mit der Demo finden Sie auf dieser Seite: CSS Sticky Footer
Mohitp
Hey, ich bin deinen Schritten gefolgt und es funktioniert ziemlich gut für große Seiten. Auf kleinen Seiten, auf denen der Benutzer nicht nach unten scrollen kann, befindet sich die Fußzeile jedoch etwas zu weit unten. So kann eine fast leere Seite gescrollt werden. Weiß jemand, wie man das behebt? Sie können meine Testseite hier sehen. Sheltered-escarpment-6887.herokuapp.com
Syk
1
@Syk Ich habe festgestellt, dass das Reduzieren der Mindesthöhe hilft. 94% ist ein guter Wert, aber Sie sehen immer noch das Problem auf dem Handy :( Ich
bin
84

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.

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

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:

Danield
quelle
4
Dies ist so ziemlich die beste Lösung, die ich hier gesehen habe. Sie hat sogar in meinem seltsamen Fall mit einigen Inhalten des Inhalts funktioniert, die aus Wer-weiß-was-Grund in die Fußzeile überlaufen. Und ich denke, mit etw wie Sass und Variablen könnte es immer flexibler werden.
themarketka
1
In der Tat funktioniert dieser wie ein Zauber. Einfacher Fallback auch für nicht unterstützende Browser.
Aramir
3
Wie ist es nicht immer noch schwierig, mit absoluten Messungen herumzuspielen? Bestenfalls ist es vielleicht weniger hacky
Jonathan
Aber und wenn die Höhe von Fußzeile und Kopfzeile in Prozent und nicht in px gemessen wird? Wie 15% der Seitenhöhe?
Fernanda Brum Lousada
3
Ansichtsfenster-Einheiten funktionieren nicht immer wie erwartet in mobilen Browsern, die je nach Bildlaufposition die Adressleiste ausblenden oder anzeigen
Evgeny
57

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; }
gcedo
quelle
13
Ich denke, dies ist die richtige Antwort, da dies tatsächlich der einzige Ansatz ist, der auch dann funktioniert, wenn die Höhe der Fußzeile nicht bekannt ist.
Fstanis
Dies bringt die Startaufstellung mit Neat 2
Halfacht am
Aber warum nicht die Lösung von Philip Walton selbst, warum ein zusätzliches "Spacer" -Element?
YakovL
@YakovL In Waltons Lösungselement .Site-contentspielt die gleiche Rolle wie spacer. Es heißt einfach anders.
Gherman
@Gherman gut, .Site-contenthat ein Analogon .contentin diesem Markup .. aber egal, ich fragte nach dem Fall gcedo hat eine spezifische Idee darüber, keine Notwendigkeit zu raten
YakovL
30

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; 
}
Jimmy
quelle
Ich habe dies mit meinem ähnlichen Setup (zwei Spalten + Fußzeile) versucht und es funktioniert nicht.
Isomorphismen
14
Es überschneidet sich mit Inhalten, wenn Inhalte wachsen.
Satya Prakash
1
Deshalb hat der Inhalt den unteren Rand. Sie müssen die festgelegte Höhe für die Fußzeile festlegen.
Jimmy
Für das, was es wert ist, wenn etwas ein Nullwert ist, spielt es keine Rolle, in welcher Maßeinheit es sich befindet, nichts ist nichts, also sollten alle 0pxs in allen Stylesheets, die ich gesehen habe, gerecht sein 0.
Jonathan
Was ist, wenn die Seitenhöhe größer ist als die Höhe der Anzeige oder die Inhaltslänge der Fußzeile dynamisch ist? Meine Antwort zur Lösung dieses Problems anzeigen.
Ravinder Payal
15

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 )
Sophivorus
quelle
Eine Alternative besteht darin, direkt vor der Fußzeile ein "Drücker" -Div hinzuzufügen. Stellen Sie dann die Höhe des Drückers ein. Dies vermeidet, dass man sich mit der bestehenden Margin-Top
Sarsaparilla
Siehe meine Antwort für eine No-JS-Lösung.
Ferit
11

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).

Raleigh Buckner
quelle
10
Wenn das Fenster zu klein ist, wird die Fußzeile mit diesem CSS vor dem Inhalt angezeigt.
Seichi
1
Siehe meine Antwort @Seichi
ferit
6

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>

Temani Afif
quelle
1
Ein anderer Ansatz wäre zu geben .content flex: 1 0 auto;, um es anbaubar und nicht schinkbar zu machen, aber es margin-top: auto;ist ein netter Trick, bei dem die Fußzeile gestylt wird, nicht "nicht verwandt", .contentwas nett ist. Eigentlich frage ich mich, warum Flex in diesem Ansatz benötigt wird.
YakovL
@YakovL ja, die Hauptidee hier ist der Rand-Top-Trick;) Ich weiß, dass ich den Inhalt so erstellen kann, aber es wird fast das gleiche sein wie bei einer vorherigen Antwort, bei der die Idee besteht, die Fußzeile durch den Inhalt zu verschieben ... und hier wollte ich dies vermeiden und die Fußzeile nur mit Rand schieben;)
Temani Afif
@YakovL flex wird für den Rand benötigt: auto :) wir können es nicht ohne es verwenden ... als Rand: auto verhält sich mit flex item etwas anders als block items. Wenn Sie es entfernen display:flex, funktioniert es nicht, Sie haben einen normalen Blockelementfluss
Temani Afif
Ja, ich kann sehen, dass es ohne es nicht funktionieren wird, aber ich verstehe nicht warum (was "etwas anders" ist)
YakovL
1
@YakovL Es ist einfach, bei Verwendung eines normalen Blockelements ist der Fluss immer eine Zeilenrichtung, sodass nur der mit auto verwendete Rand rechts / links funktioniert (wie das berühmte margin:0 autoBlockelement zum Zentrieren), ABER wir haben keine Spaltenrichtung, sodass es keinen Rand gibt Auto mit oben / unten. Flexbox hat sowohl Zeilen- als auch Spaltenrichtung;). Dies ist der geringfügige Unterschied, aber der Rand wird auch in der Flexbox verwendet, um das Element auszurichten, sodass Sie selbst innerhalb einer Zeilenrichtung die automatische Ausrichtung von Rand nach oben / unten verwenden können, um vertikal auszurichten. Weitere Informationen
Temani Afif
5

Geben Sie hier die Bildbeschreibung ein

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/

ferit
quelle
2

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

Daniel Alsaker
quelle
Das hat mir geholfen, aber ich habe der Fußzeile eine Breite von 100% hinzugefügt.
Victor.Uduak
2

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>

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.

VXp
quelle
1

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.

Ajith
quelle
1

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>

Paul Sweatte
quelle
1

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 :)

jjr2000
quelle
0

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).

Grauer Panther
quelle
0

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).

obecalp
quelle
0

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.

Kyle Zimmer
quelle
0

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/

user1235285
quelle
0

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.

Ravinder Payal
quelle
0

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;
}
Lachendes Pferd
quelle
0

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;
}
Reggie Pinkham
quelle
0

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
}
Juan Isaza
quelle
1
Ist diese Syntax korrekt? Soll die Position statisch oder fest sein?
Stealththeninja
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>

DevWL
quelle
Vanilla Java-Skript ist weniger lang als Plugin.
Ravinder Payal
0

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.

Roger
quelle
0

div.fixed {
   position: fixed;
   bottom: 0;
   right: 0;
   width: 100%;
   border: 3px solid #73AD21;
}
<body style="height:1500px">

   <h2>position: fixed;</h2>

   <p>An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled:</p>

   <div class="fixed">
      This div element has position: fixed;
   </div>

</body>

Anteliebe
quelle
0

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.

kiko carisse
quelle
-1

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?

John Sheehan
quelle