web-dev-qa-db-fra.com

Fixez le pied de page au bas de la page avec Twitter Bootstrap

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

J'ai mis toutes mes pages dans un "titulaire"

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

Et puis 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:[email protected]</li>
        </ul>
      </div>
    </div>
  </div>
</div>

Je voudrais garder le pied de page fluide.

csstwitter-bootstrap
69
Richlewis

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 consiste à ajouter height: 100% à html, body afin que l’élément #footer dispose d’une hauteur de base à partir de laquelle travailler - ceci manque dans votre code:

html,body{
    height: 100%
}

Vous constaterez également que vous rencontrerez des problèmes d’utilisation de bottom: -50px, car cela pousserait votre contenu sous le pli quand il n’y en aurait pas beaucoup. Vous devrez ajouter margin-bottom: 50px au dernier élément avant le #footer.

39
My Head Hurts

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

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

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

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

6
Victor

Utilisez les classes de bootstrap à votre avantage. navbar-static-bottom le laisse en bas.

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

La plupart des solutions mentionnées ci-dessus n'ont pas fonctionné pour moi. Cependant, la solution donnée ci-dessous fonctionne très bien: 

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

La source

5
BlackBeard

Cela pourrait être facilement réalisé avec CSS flex . Avoir le balisage HTML comme suit:

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

Les CSS suivants doivent être utilisés:

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

Voici CodePen pour jouer avec: https://codepen.io/webdevchars/pen/GPBqWZ

0
Damian Czapiewski