Pied de page fixe dans Bootstrap

Question

Je teste Bootstrap et je me demandais, comment puis-je fixer le pied de page en bas sans qu'il disparaisse de la page si le contenu est défilé?

Answer 1

Pour obtenir un pied de page qui reste collé en bas de votre fenêtre d'affichage, donnez-lui une position fixe comme ceci :

footer {
    position: fixed;
    height: 100px;
    bottom: 0;
    width: 100%;
}

Bootstrap inclut ce CSS dans la section Navbar > Placement avec la classe fixed-bottom. Ajoutez simplement cette classe à votre élément de pied de page :

Documentation Bootstrap : https://getbootstrap.com/docs/4.4/utilities/position/#fixed-bottom

Answer 2

Ajoutez ceci :

https://stackoverflow.com/a/21604189

EDIT: class navbar-fixed-bottom a été changé en fixed-bottom à partir de Bootstrap v4-alpha.6.

http://v4-alpha.getbootstrap.com/components/navbar/#placement

Answer 3

Ajouter fixed-bottom :

Answer 4

Ajoutez z-index:-9999; à cette méthode, sinon elle couvrira votre barre supérieure si vous avez 1.

Answer 5

Une autre solution :

Vous pouvez utiliser "min-height: 80vh;".

Cela vous permet de définir la hauteur minimum, en utilisant la hauteur de l'écran.

Exemple avec bootstrap :

main {
   min-height: 80vh;
   height: auto !important;
   height: 100%;
   margin: 0 auto -60px;
}

Compatibilité :

Chrome 31+ / FireFox 31+ / Safari 7+ / Internet Expl. 9+ / Opera 29+

Plus d'informations : https://developer.mozilla.org/fr/docs/Web/CSS/length