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:exampleemail@gmail.com</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

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