Bootstrap 3 Spülen Sie die Fußzeile nach unten. nicht behoben

176

Ich verwende Bootstrap 3 für eine Site, die ich entwerfe.

Ich möchte eine Fußzeile wie diese haben. Stichprobe

Bitte beachten Sie, dass ich nicht möchte, dass es BEHOBEN wird, damit das Bootstrap-Navigationsfeld mit festem Boden mein Problem nicht löst. Ich möchte nur, dass es immer am Ende des Inhalts steht und auch reagiert.

Jeder Führer wird sehr geschätzt.

BEARBEITEN:

Entschuldigung, wenn ich nicht klar war. Was jetzt passiert ist, dass, wenn der Inhaltskörper nicht genug Inhalt hat. Meine Fußzeile bewegt sich nach oben und hinterlässt unten einen leeren Raum.

Das habe ich jetzt für meine Navigationsleiste

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
html css twitter-bootstrap footer user3169403
quelle
Haben Sie Beispielcode, an dem Sie gearbeitet haben und der Ihnen ein Problem bereitet?
BadAdviceGuy
Es scheint wie eine normale Fußzeile. Wenn Sie Fixed nicht möchten, können Sie den Stil aktualisieren. Auf welches Problem stoßen Sie?
Mutant
Wenn es das letzte in Ihrem HTML ist, wird es immer ganz unten sein. Verwirrende Frage, die ein Codebeispiel benötigt, um das Problem zu verstehen.
Joe Conlin
stackoverflow.com/questions/643879/…
davidpauljunior
@davidpauljunior: Das sind klebrige Fußzeilen, was nicht das ist, wonach ich suche
user3169403

Antworten:

123

Siehe das folgende Beispiel. Dadurch wird Ihre Fußzeile so positioniert, dass sie unten bleibt, wenn die Seite weniger Inhalt hat, und sich wie eine normale Fußzeile verhält, wenn die Seite mehr Inhalt hat.

CSS

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

HTML

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

UPDATE : Die neue Version von Bootstrap zeigt, wie Sie eine klebrige Fußzeile hinzufügen können, ohne einen Wrapper hinzuzufügen. Weitere Informationen finden Sie in der Antwort von Jboy Flaga.

Surjith SM
quelle
Ihre Links sind kaputt
Halter
2
Warum gibt es im Wrapper zwei Definitionen von Höheneigenschaften?
Kaum zu bemerken
@HardlyNoticeable ist min-width, um den Wrapper zu erzwingen, auch wenn der Inhalt geringer ist.
Surjith SM
Ich frage mich immer noch, warum es zwei Definitionen der Höheneigenschaften gibt. Sie haben nicht geantwortet @SurjithSM
Erowlin
@Erowlin Das ist ein Fehler. Sie brauchten keine zwei Höheneigenschaften. Nur minimale Höhe wird ausreichen, bearbeitet die Antwort.
Surjith SM
315

Hier gibt es eine vereinfachte Lösung von Bootstrap (bei der Sie keine neue Klasse erstellen müssen): http://getbootstrap.com/examples/sticky-footer-navbar/

Wenn Sie diese Seite öffnen, klicken Sie mit der rechten Maustaste auf einen Browser und klicken Sie auf "Quelle anzeigen" und öffnen Sie die Datei sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar). CSS )

Sie können sehen, dass Sie nur dieses CSS benötigen

/* Sticky footer styles
-------------------------------------------------- */
html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 60px;
  background-color: #f5f5f5;
}

für diesen HTML

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>
Jboy Flaga
quelle
19
Dies (aus den Bootstrap-Dokumenten / Beispielen) sollte die akzeptierte Antwort sein.
Richard
5
Bei mir funktioniert das nicht, weil meine Fußzeile ziemlich groß ist. Es ist großartig, wenn Sie nur einen Absatz möchten, aber meiner hat mehrere Spalten - mit dieser Methode habe ich einen Rand unter der Fußzeile, wenn ich auf kleinere Größen verkleinere
NightMICU
9
Ist das nicht Bootstraps Sticky Footer-Lösung? Ich glaube nicht, dass das OP dies gemeint hat. Bei einer langen Seite wurde meine Fußzeile am unteren Bildschirmrand angezeigt, jedoch nicht am unteren Rand des Inhalts (dh über dem Inhalt). Ich musste die Position ändern: absolut; zu relativ (in der .footer-Klasse), damit dies funktioniert.
Tino Mclaren
24
Dies wäre die richtige Antwort, wenn dieses Thema nicht "nicht behoben" im Titel
gehabt hätte
1
Dies funktioniert nur für Fußzeilen mit fester Größe. Ich bevorzuge die von @ChristopherTan vorgeschlagene Lösung von Philip Walton, die super schlank und unabhängig von der Höhe der Fußzeile ist
buergi
15

Verwenden Sie die Flexbox, wie Sie sie zur Verfügung haben. Die Lösung von Bootstrap angeboten 4 Jagd noch Überlappung Inhalt in ansprechendem Layout, zum Beispiel: es in der mobilen Ansicht brechen wird, komme ich über den meist netten Trick ist die Verwendung Flexbox Lösung Demo an hier gezeigt :( https://philipwalton.github.io / gelöst durch Flexbox / Demos / Sticky-Footer / ) Auf diese Weise müssen wir uns nicht mit Problemen mit fester Höhe befassen, die mittlerweile veraltet sind. Diese Lösung funktioniert für Bootstrap 3 und 4, je nachdem, was Sie verwenden.

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

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

.Site-content {
  flex: 1;
}
Christopher Tan
quelle
Dies ist eine sehr clevere Lösung. Ich denke, dass CSS zu viel zu bieten hat, als dass wir nicht einmal wissen, wie wir das Beste daraus machen können.
Gilbert
1
Ich liebe diese Lösung. Tolle.
Bagus Aji Santoso
14

UPDATE: Dies beantwortet die Frage nicht direkt in ihrer Gesamtheit, aber andere finden dies möglicherweise nützlich.

Dies ist der HTML-Code für Ihre reaktionsschnelle Fußzeile

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

Für das CSS

footer{
    width:100%;
    min-height:100px;    
    background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */
}

HINWEIS: Zum Zeitpunkt der Veröffentlichung dieser Frage wird die Fußzeile durch die obigen Codezeilen nicht unter den Seiteninhalt verschoben. Es verhindert jedoch, dass Ihre Fußzeile auf halber Höhe der Seite kriecht, wenn die Seite nur wenig Inhalt enthält. Ein Beispiel, bei dem die Fußzeile unter den Seiteninhalt verschoben wird, finden Sie hier http://getbootstrap.com/examples/sticky-footer/

Rex CoolCode Charles
quelle
Dies ist eigentlich eine schlechte Lösung, da die Fußzeile den Hauptinhalt verdeckt, wenn sie sich treffen. Sie müssen padding-bottomden Hauptinhaltscontainer auf die Höhe der Fußzeile einstellen . Und Sie müssen dies dynamisch auf Seiten loadund resizeEreignissen sowie in der Fußzeile tun DOMSubtreeModified.
Tao
9

Für Leute, die immer noch Probleme haben und die beantwortete Lösung nicht ganz so funktioniert, wie Sie es möchten, ist hier die einfachste Lösung, die ich gefunden habe.

Wickeln Sie Ihren Hauptinhalt ein und weisen Sie ihm eine minimale Ansichtshöhe zu. Stellen Sie die 60 auf den Wert ein, den Ihr Stil benötigt.

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

Das ist es und es funktioniert ziemlich gut.

eGlu
quelle
Ich hatte das gleiche Problem wie das fragliche. Nachdem ich hier fast alle hochrangigen Antworten ausprobiert hatte, war dies die einzige, die für mich funktionierte. Und es hat in allen Größen funktioniert. Die einzige Änderung, die ich vorgenommen habe, war "min-height: 70vh". Dies hängt von den Kopf- und Fußzeilengrößen Ihrer Site ab.
Arfath
Dies sollte höher sein, funktioniert genau wie angefordert.
Yam
Das hat für meine Bedürfnisse funktioniert. Passen Sie einfach den Mindesthöhenwert an, bis Sie das gewünschte Ergebnis erhalten.
Sawyerrken
Wunderbar, dies ist die einfachste und effizienteste Lösung für das Problem der Fußzeilenplatzierung!
Prahlad Yeri
5

Galen Gidman hat eine wirklich gute Lösung für das Problem einer reaktionsschnellen, klebrigen Fußzeile ohne feste Höhe veröffentlicht. Seine vollständige Lösung finden Sie in seinem Blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }
weiy
quelle
Dies scheint mit Bootstrap kompatibel zu sein und sollte daher die akzeptierte Antwort sein, imho. Es ist nicht perfekt, da eine horizontale Bildlaufleiste angezeigt wird.
Florian Mertens
Florian: Keine horizontale Bildlaufleiste für mich.
Kaum zu bemerken
4

Scrollen Sie für eine reine CSS-Lösung nach dem zweiten <hr>. Die erste ist die erste Antwort (im Jahr 2016 zurückgegeben)

Der Hauptfehler der oben genannten Lösungen besteht darin, dass sie eine feste Höhe für die Fußzeile haben.
Und das ist in der realen Welt, in der Menschen eine Unmenge von Geräten verwenden und die schlechte Angewohnheit haben, sie zu drehen, wenn Sie es am wenigsten erwarten, und ** Poof! ** Da geht dein Seiteninhalt hinter die Fußzeile!

In der realen Welt benötigen Sie eine Funktion, die die Höhe der Fußzeile berechnet und den Seiteninhalt dynamisch an padding-bottomdiese Höhe anpasst . Und Sie müssen diese winzige Funktion sowohl auf Seiten loadund resizeEreignissen als auch auf Fußzeilen ausführen DOMSubtreeModified(nur für den Fall, dass Ihre Fußzeile dynamisch asynchron aktualisiert wird oder animierte Elemente enthält, deren Größe sich bei der Interaktion ändert).

Hier ist ein Proof of Concept mit jQuery v3.0.0und Bootstrap v4-alpha, aber es gibt keinen Grund, warum es nicht mit niedrigeren Versionen funktionieren sollte.

Code-Snippet anzeigen

Anfangs habe ich diese Lösung hier veröffentlicht, aber mir wurde klar, dass sie möglicherweise mehr Menschen hilft, wenn sie unter dieser Frage veröffentlicht wird.

Hinweis: Ich habe das absichtlich verpackt$([selector]).accomodateFooter() als jQuery - Plugin, so dass es auf jedem DOM - Element ausgeführt werden können, wie in den meisten Layouts ist es nicht das $('body')ist , bottom-paddingdass die Bedürfnisse eingestellt, aber einige Seite Wrapperelement mit position:relative( in der Regel die unmittelbare Mutter der footer) .

Später bearbeiten (3+ Jahre nach der ersten Antwort):

Ab diesem Zeitpunkt halte ich die Verwendung von JavaScript für die Positionierung einer dynamischen Inhaltsfußzeile am Ende der Seite nicht mehr für akzeptabel. Dies kann allein mit CSS erreicht werden, mit Flexbox, blitzschnell und browserübergreifend.

Hier ist es:

Code-Snippet anzeigen

tao
quelle
3

Diese Methode verwendet minimales Markup. Legen Sie einfach Ihren gesamten Inhalt in einen .wrapper, dessen Polsterung unten und negativer Rand unten der Fußzeilenhöhe entsprechen (in meinem Beispiel 100px).

html, body {
    height: 100%;
}

/* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */

.wrapper {
    min-height: 100%;
    height: auto;
    margin: 0 auto -100px;
    padding-bottom: 100px;
}
.footer {
    height: 100px;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>
Vin
quelle
2

Oder dieses

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>
AnBisw
quelle
1

Für Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>
shilovk
quelle
2
Die Frage besagt ausdrücklich, dass dies navbar-fixed-bottomNICHT das Problem löst.
p4sh4
1

Keine dieser Lösungen funktionierte genau für mich, da ich in meiner Fußzeile die Navbar-Inverse-Klasse verwendet habe. Aber ich habe eine Lösung bekommen, die funktioniert und Javascript-frei ist. Verwendet Chrome, um Medienabfragen zu erstellen. Die Höhe der Fußzeile ändert sich, wenn sich die Größe des Bildschirms ändert. Sie müssen dies berücksichtigen und entsprechend anpassen. Ihr Fußzeileninhalt (ich setze id = "footer", um meinen Inhalt zu definieren) sollte postion = absolute und bottom = 0 verwenden, um ihn unten zu halten. Auch Breite: 100%. Hier ist mein CSS mit Medienabfragen. Sie müssen die minimale und maximale Breite anpassen und einige Elemente hinzufügen oder entfernen:

#footer {
  position: absolute;
  color:  #ffffff;
  width: 100%;
  bottom: 0; 
}
@media only screen and (min-width:1px) and (max-width: 407px)  {
    body {
        margin-bottom: 275px;
    }

    #footer {
        height: 270px; 
    }
}
@media only screen and (min-width:408px) and (max-width: 768px)  {
    body {
        margin-bottom: 245px;
    }

    #footer {
        height: 240px; 
    }
}
@media only screen and (min-width:769px)   {
    body {
        margin-bottom: 125px;
    }

    #footer {
        height: 120px; 
    }
}
Brian Edwards
quelle