Comment créer un pied collant qui joue bien avec Bootstrap 3

Avec ou sans top nav, il est très courant que les sites aient un pied collant. Bootstrap a la capacité de créer facilement des pieds de page fixes , mais pas une telle facilité pour créer des pieds de page collants – il y a une grande différence.

Googler cette question révélera que des centaines, voire des milliers de développeurs ont la même question mais sans bonne réponse.

Ironiquement, la page de documentation Bootstrap elle-même a un pied collant à côté du style bootstrap et une barre de navigation supérieure fixe. C’est tout css personnalisé, et ne fait pas partie du cadre. Donc, une voie évidente est de prendre et de réorganiser leur style personnalisé, car cela joue évidemment bien dans le cadre de Bootstrap, mais cela semble plus douloureux qu’il ne devrait l’être.

Voir ce plunkr pour un exemple de page avec une barre de navigation supérieure Bootstrap et un pied de page indésirable non collant.

Problème:

(Merci Softlayer – pour les graphiques )

Un pied de page non collant est assez moche

Solution souhaitée:

Un pied collant est toujours en bas

Bien sûr, le pied de page devrait être réactif et compatible avec tous les navigateurs …

La réponse, comme le souligne Schmalzy, peut être trouvée ici dans la section des exemples du site getbootstrap.

Mais cet exemple n’inclut pas de top nav. Pour la navigation top fixe avec un pied collant, voir ce code ou code ci-dessous.

Style CSS:

/* Styles go here */ /* Sticky footer styles -------------------------------------------------- */ html, body { height: 100%; /* The html and body elements cannot have any padding or margin. */ } /* Wrapper for page content to push down footer */ #wrap { min-height: 100%; height: auto; /* Negative indent footer by its height */ margin: 0 auto -60px; /* Pad bottom by footer height */ padding: 0 0 60px; } /* Set the fixed height of the footer here */ #footer { height: 60px; background-color: #f5f5f5; } /* Custom page CSS -------------------------------------------------- */ /* Not required for template or sticky footer method. */ .container { width: auto; max-width: 680px; padding: 0 15px; } .container .credit { margin: 20px 0; } 

Index.html:

 < !DOCTYPE html>         Sticky Footer Template for Bootstrap            

Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

Use the sticky footer with a fixed navbar if need be, too.

Les solutions sticky footer qui reposent sur des pieds de page à hauteur fixe ne sont plus en accord avec les approches réactives (où la hauteur du pied de page change souvent à différents points de rupture). La solution sticky footer sensible la plus simple que j’ai vue consiste à utiliser display: table sur un conteneur de niveau supérieur, par exemple:

http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

http://timothy-long.com/responsive-sticky-footer/

http://www.visualdecree.co.uk/posts/2013/12/17/responsive-sticky-footers/

Le meilleur moyen est de procéder comme suit:
HTML: Sticky Footer
CSS: CSS pour Sticky Footer
Exemple de code HTML:

 

Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

Use the sticky footer with a fixed navbar if need be, too.

Place sticky footer content here.

Exemple de code CSS:

  html { position: relative; min-height: 100%; } body { /* Margin bottom by footer height */ margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 60px; background-color: #f5f5f5; } 

Un autre petit ajustement pourrait le rendre plus parfait (cela dépend de votre projet), donc cela n’affectera pas le pied de page sur les vues mobiles.

 @media (max-width:768px){ .footer{position:absolute;width:100%;} } @media (min-width:768px){ .footer{position:absolute;bottom:0;height:60px;width:100%;}} 

J’ai cherché un moyen simple de faire fonctionner le sticky footer. Je viens d’appliquer un class="navbar-fixed-bottom ” et cela a fonctionné instantanément Seule chose à garder à l’esprit, c’est d’ajuster les parameters du pied de page pour les appareils mobiles. À votre santé!

Pour ceux qui recherchent une réponse claire, vous pouvez obtenir un exemple de travail simple ici :

 html { position: relative; min-height: 100%; } body { margin-bottom: 60px /* Height of the footer */ } footer { position: absolute; bottom: 0; width: 100%; height: 60px /* Example value */ } 

Jouez simplement avec le margin-bottom pour append de l’espace entre le contenu et le pied de page.

Je vais développer ce que robodo a dit dans un des commentaires ci-dessus, une approche très rapide et esthétique, plus importante, plus réactive (pas de hauteur fixe), qui n’implique pas de hacks: utiliser la flexbox. Si vous n’êtes pas limité par le support des navigateurs, c’est une excellente solution.

HTML

  
Site content
Footer content

CSS

 html { height: 100%; } body { min-height: 100%; display: flex; flex-direction: column; } .site-content { flex: 1; } 

Le support du navigateur peut être vérifié ici: http://caniuse.com/#feat=flexbox

Solutions de problèmes plus courantes en utilisant flexbox: https://github.com/philipwalton/solved-by-flexbox

Pas sûr de ce que vous avez essayé jusqu’à présent, mais c’est assez simple. Faites simplement ceci: http://plnkr.co/edit/kmEWh7?p=preview

 html, body { height: 100%; } footer { position: absolute; bottom: 0; } 

Comme il est dans bootstrap 3, le site utilisera jQuery. La solution pourrait donc être la suivante, au lieu d’essayer de jouer avec des CSS complexes:

 < !DOCTYPE html>        
asdfasdfasdfasdfs
asdfasdfasdfasdfs
asdfasdfasdfasdfs

Une autre approche, j’espère que ça aide.

Sincères amitiés.

régler facilement

 position:absolute; bottom:0; width:100%; 

à votre .footer

fais-le

Si votre code HTML a la structure (approximative):

 
....
...
....

alors le plus simple css qui fixe le pied de page au bas de votre écran est

 html, body { height: 100%; } .wrapper { min-height: calc(100vh - 80px); } .footer { height: 80px; } 

… où la hauteur du pied de page est de 80px. calc calcule la hauteur de l’encapsuleur pour qu’elle soit égale à la hauteur de la fenêtre moins la hauteur du pied de page (80px) qui est hors du .wrapper

Ce qui a fonctionné pour moi a été d’append la position relative à la balise html.

 html { min-height:100%; position:relative; } body { margin-bottom:60px; } footer { position:absolute; bottom:0; height:60px; } 
   

Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS.

Use the sticky footer with a fixed navbar if need be, too.