Lassen Sie die Fußzeile mit Twitter Bootstrap am Ende der Seite haften

75

Ich habe einige Webseiten, die nicht viel Inhalt haben, und die Fußzeile befindet sich in der Mitte der Seite, aber ich möchte, dass sie unten angezeigt wird.

Ich habe alle meine Seiten in einen "Halter" gelegt

#holder {
  min-height: 100%;
  position:relative;
}

Und dann das folgende CSS für meine Fußzeile verwendet

ul.footer {
  margin-top: 10px;
  text-align: center;
}

ul.footer li {
  color: #333;
  display: inline-block;
}

#footer {
  bottom: -50px;
  height: 50px;
  left: 0;
  position: absolute;
  right: 0;
}

Das HTML für meine Fußzeile

<div class="container">
  <div class="row">
    <div class="span12">
      <div id="footer">
        <ul class="footer">
          <li>Website built by <a href="#">Fishplate</a></li>&nbsp;&nbsp;
          <li>Email:[email protected]</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Ich möchte die Fußzeile flüssig halten.

css twitter-bootstrap Richlewis
quelle
1
Nun, die absolute Position Ihrer Fußzeile hängt vollständig von der Größe der Container-Divs ab. Wenn sich also kein Inhalt im Container befindet, endet er wahrscheinlich irgendwo in der Mitte der Seite und Sie befinden sich 50px darunter in der Fußzeile.
Jakee
Vielen Dank für die Antwort. Was wäre eine Lösung, um dies zu umgehen?
Richlewis
Positionieren Sie entweder Ihre Fußzeile außerhalb des Containers div oder zwingen Sie den Container auf volle Höhe
jakee
Dies kann sein, wonach Sie suchen stackoverflow.com/q/8824831/681807
Mein Kopf tut weh
@ MyHeadHurts, es ist Ihre Lösung, die ich verwende, aber ich glaube, ich habe jetzt Probleme, da ich die Fußzeile in einen Container, eine Zeile und einen Bereich 12
Richlewis

Antworten:

43

Wie in den Kommentaren erläutert, haben Sie Ihren Code auf diese Lösung gestützt: https://stackoverflow.com/a/8825714/681807

Einer der wichtigsten Teile dieser Lösung ist das Hinzufügen height: 100%, html, bodydamit das #footerElement eine Basishöhe hat, von der aus gearbeitet werden kann - dies fehlt in Ihrem Code:

html,body{
    height: 100%
}

Sie werden auch feststellen, dass Sie Probleme bei der Verwendung haben, bottom: -50pxda dies Ihren Inhalt unter die Falte schiebt, wenn nicht viel Inhalt vorhanden ist. Sie müssen margin-bottom: 50pxdas letzte Element vor dem hinzufügen #footer.

Mein Kopf tut weh
quelle
Vielen Dank, ich dachte, dass das HTML, Körpergröße eingestellt worden war, scheint es nicht war, auch unten und voila geändert.
Nochmals vielen
Entschuldigung, um noch einmal zu fragen, aber ich habe jetzt bemerkt, wenn das Ansichtsfenster verkleinert wird, um die Größe eines iPhones zu sagen, wird der Fußzeilentext vom Inhalt überlappt? irgendwelche Ideen?
Richlewis
Kein Problem. Bewerben Sie sich margin-bottom: 50pxfür den letzten Inhalt vor der Fußzeile? Wenn Sie es sind und es nicht funktioniert, müssen Sie dies möglicherweise für ein iPhone erhöhen (nicht sicher, warum Sie dies tun würden, aber es könnte der Fall sein). Sie können dies mit CSS-Medienabfragen
Mein Kopf tut weh
1
Ich sehe meinen Fehler, ich habe nicht Rand-unten angewendet: 50px auf den Inhalt vor der Fußzeile, wie Sie sagten, setzen Sie unten auf 0 und jetzt in Ordnung, keine Notwendigkeit für eine Medienabfrage ... PHEW !!!
Richlewis
Das ist eine großartige Lösung.
Ryu_hayabusa
92

Fügen Sie einfach die Klasse navbar-fixed-bottom zu Ihrer Fußzeile hinzu.

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

Update für Bootstrap 4 -

wie von Sara Tibbetts erwähnt - Klasse ist fester Boden

<div class="footer fixed-bottom">
Jon
quelle
11
Dadurch wurde eine eingefrorene Fußzeile erstellt, unter der der Inhalt nach oben gescrollt wurde. Vermisse ich etwas Danke.
scharfmn
Dadurch bleibt die Fußzeile am unteren Bildschirmrand hängen, wenn Sie dies mit eingefroren meinen. Auf einem kleinen Bildschirm wird die Fußzeile angezeigt, auch wenn sich der Inhalt überschneidet. Kommt darauf an, ob du immer die Fußzeile zeigen willst
Jon
Es ist auch gut zu beachten, dass Sie, wenn Sie JS generiert haben, einen ng-repeatWinkel margin-bottomfür die generierten Elemente aufsetzen müssen, der der Höhe der klebrigen Fußzeile entspricht. Der Bootstrap setzt den Rand oben auf die Fußzeile, aber den Rand -top gilt nicht für generierte Dom und Sie werden am Ende Ihres generierten Dom unter der Fußzeile landen.
Benjamin Conant
Vielen Dank! Hat für mich gearbeitet!
FlokiTheFisherman
4
Ab Bootstrap 4 ist es stattdessen navbar-fixed-bottomnurfixed-bottom
Sara Tibbetts
12

Die meisten der oben genannten Lösungen haben bei mir nicht funktioniert. Die unten angegebene Lösung funktioniert jedoch einwandfrei: 

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

Quelle

BlackBeard
quelle
2
Funktioniert, überschreibt aber den Inhalt
Rami Alloush
Hat gut funktioniert für mich
Ozan Yasin Dogan
8

http://bootstrapfooter.codeplex.com/

Dies sollte Ihr Problem lösen.

<div id="wrap">
<div id="main" class="container clear-top">
<div class="row">
<div class="span12">
Your content here.
</div>
</div>
</div>
</div>
<footer class="footer" style="background-color:#c2c2c2">
</footer>

CSS:

html,body
{
height:100%;
}

#wrap
{
min-height: 100%;
}

#main
{
overflow:auto;
padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer
{
position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;
padding-top:20px;
color:#fff;
}
easwee
quelle
danke, was macht @renderbody (), ich habe diese Lösung schon einmal ausprobiert und ich bekomme tatsächlich @renderbody () als HTML ausgegeben?
Richlewis
Ignorieren Sie diesen Teil - es ist nur eine Funktion, die den Body-Inhalt von anderen Steuerelementen aufruft.
Easwee
6

Hier ist ein Beispiel mit css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

Geige

Sieger
quelle
Fantastische Verwendung von calc. Leider immer noch ein Problem im Jahr 2017 mit benutzerdefinierten Websites, die einige Bootstrap-Funktionen verwenden
Soulshined
6

Nutzen Sie die Bootstrap-Klassen zu Ihrem Vorteil. navbar-static-bottomlässt es unten.

<div class="navbar-static-bottom" id="footer"></div>
Coding Enthusiast
quelle
1

Dies könnte leicht mit CSS flex erreicht werden. HTML-Markup wie folgt:

<html>
    <body>
        <div class="container"></div>
        <div class="footer"></div>
    </body>
</html>

Folgendes CSS sollte verwendet werden:

html {
    height: 100%;
}
body {
    min-height: 100%;
   display: flex;
   flex-direction: column;
}
body > .container {
    flex-grow: 1;
}

Hier ist CodePen zum Spielen: https://codepen.io/webdevchars/pen/GPBqWZ

Damian Czapiewski
quelle