Faire en sorte que le pied de page rest en bas de la page en utilisant Twitter Bootstrap

J’ai des pages Web qui n’ont pas beaucoup de contenu et le bas 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 “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 footer

 

Je voudrais garder le fluide de pied de page.

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 à append de la height: 100% à html, body pour que l’élément #footer ait une hauteur de base sur laquelle travailler: cela manque dans votre code:

 html,body{ height: 100% } 

Vous constaterez également que vous rencontrerez des problèmes avec l’utilisation de bottom: -50px car cela va pousser votre contenu sous le pli quand il n’y a pas beaucoup de contenu. Vous devrez append margin-bottom: 50px au dernier élément avant le #footer .

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

  

http://bootstrapfooter.codeplex.com/

Cela devrait résoudre votre problème.

 
Your content here.

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

Voici un exemple d’utilisation de 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:

 
body content....
footer content....

violon

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

  

La plupart de la solution mentionnée ci-dessus n’a pas fonctionné pour moi. Cependant, la solution ci-dessous fonctionne correctement:

 
...

La source