it-swarm.com.de

Verwenden Sie Twitter Bootstrap, um die Fußzeile am unteren Rand der Seite zu halten

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

Ich habe alle meine Seiten in einen "Halter" gelegt

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

Und benutzte dann die folgende CSS für meine Fußzeile

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;
}

Die HTML-Datei 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.

69
Richlewis

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

Einer der wichtigsten Bestandteile dieser Lösung ist das Hinzufügen von height: 100% zu html, body, damit das #footer-Element eine Basishöhe hat, aus der gearbeitet werden kann. Dies fehlt im Code:

html,body{
    height: 100%
}

Sie werden auch feststellen, dass Sie mit bottom: -50px auf Probleme stoßen, da dies dazu führt, dass Ihre Inhalte unter die Falte kommen, wenn nicht viel Inhalt vorhanden ist. Sie müssen dem letzten Element vor dem margin-bottom: 50px#footer hinzufügen.

39
My Head Hurts

fügen Sie einfach die Klasse navbar-fixed-bottom in Ihre Fußzeile ein.

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

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;
}
8
easwee

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

6
Victor

Verwenden Sie die Bootstrap-Klassen zu Ihrem Vorteil. navbar-static-bottom lässt es unten liegen.

<div class="navbar-static-bottom" id="footer"></div>
6

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

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

Quelle

5
BlackBeard

Es 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, mit dem Sie spielen können: https://codepen.io/webdevchars/pen/GPBqWZ

0