Faire en sorte que le pied de page reste en bas de la page à l'aide de Twitter Bootstrap

Question

J'ai quelques pages Web qui n'ont pas beaucoup de contenu et le pied de page se trouve au milieu de la page, mais je veux qu'il soit en bas.

J'ai mis toutes mes pages dans un "support".

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

Puis j'ai utilisé le CSS suivant pour mon pied de page

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

Le html pour mon pied de page

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

Je voudrais que le pied de page reste fluide.

Answer 1

Ajoutez simplement la classe navbar-fixed-bottom à votre pied de page.

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

Mise à jour pour Bootstrap 4 -

comme mentionné par Sara Tibbetts - la classe est à fond fixe

<div class="footer fixed-bottom">

Answer 2

Comme indiqué dans les commentaires, vous avez basé votre code sur cette solution : https://stackoverflow.com/a/8825714/681807

L'un des éléments clés de cette solution est l'ajout de height: 100% a html, body donc le #footer a une hauteur de base à partir de laquelle travailler - ceci est absent de votre code :

html,body{
    height: 100%
}

Vous constaterez également que vous rencontrerez des problèmes en utilisant bottom: -50px car cela poussera votre contenu sous le pli lorsqu'il n'y a pas beaucoup de contenu. Vous devrez ajouter margin-bottom: 50px au dernier élément avant le #footer .

Answer 3

Twitter a lui-même un exemple d'une page avec un pied de page collant .

Answer 4

http://bootstrapfooter.codeplex.com/

Cela devrait résoudre votre problème.

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

Answer 5

Voici un exemple utilisant 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>

violon