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

En se référant à l’exemple officiel du pied de page Boostrap3, il n’est pas nécessaire d’append

, et le CSS est plus simple.

Le CSS utilisé dans l’exmaple officiel est:

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

et l’essentiel HTML:

Vous pouvez trouver le lien de ce css dans le code source du fichier sticky-footer .

URL complète: http://getbootstrap.com/examples/sticky-footer/sticky-footer.css

Voici une méthode qui appenda un pied de page collant qui ne nécessite pas de CSS ou de Javascript supplémentaire autre que ceux déjà présents dans Bootstrap et qui n’interfère pas avec votre pied de page actuel.

Exemple ici: Easy Sticky Footer

Copiez et collez-le directement dans votre code. Pas de chichi pas de problème.

 
 
 
© 2014 - Site Built By Mr. M. HTML 5 Validation 
   Subscribe on YouTube 
  

En plus des CSS que vous venez d’append, rappelez-vous que vous devez append le div push avant de fermer la div wrap.

La structure de base du HTML est

 
 page content here 
 
  
 footer content here 
  

Vue en direct
Modifier vue

Je suis un peu en retard sur le sujet mais je suis tombé sur ce post car je viens juste de me faire mordre par cette question et j’ai finalement trouvé un moyen très simple de le surmonter, utilisez simplement une navbar de navbar avec la navbar-fixed-bottom . Par exemple:

 
 
  Something useful  
  

HTH

Voici le code simplifié de Sticky Footer à partir d’aujourd’hui, car ils sont toujours optimisés et c’est BON:

HTML

        
 
 
Sticky footer with fixed navbar
 
 
Pin a fixed-height footer to the bottom of the viewport in desktop browsers with this custom HTML and CSS. A fixed navbar has been added with padding-top: 60px; on the body > .container.
 
Back to the default sticky footer minus the navbar.
 
    

CSS

 /* Sticky footer styles -------------------------------------------------- */ 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; } 

Voici ma solution mise à jour pour ce problème.

  /* Sticky footer styles -------------------------------------------------- */ 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; border-top: 1px solid #eee; text-align: center; } .site-footer-links { font-size: 12px; line-height: 1.5; color: #777; padding-top: 20px; display: block; text-align: center; float: center; margin: 0; list-style: none; } 

Et l’utiliser comme ça:

 
 
 
 
© Zee and Company
 
 
  

Ou

 html, body { height: 100%; } .page-wrap { min-height: 100%; /* equal to footer height */ margin-bottom: -142px; } .page-wrap:after { content: ""; display: block; } .site-footer, .page-wrap:after { height: 142px; } .site-footer { background: orange; } 

L’exemple collant ne fonctionne pas pour moi. Ma solution:

 #footer { position: fixed; bottom: 0; width: 100%; /* Set the fixed height of the footer here */ height: 3em; background-color: #f5f5f5; text-align: center; padding-top: 1em; } 

Le push div devrait aller juste après le wrap , PAS à l’intérieur … juste comme ça

 
 *content goes here* 
 
 
 
 
 
 
 
© Your Page 2013
 
  

Répondu par l’OP:

Ajoutez ceci à votre fichier CSS.

 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 !important; height: 100%; /* Negative indent footer by it's height */ margin: 0 auto -60px; } /* Set the fixed height of the footer here */ #push, #footer { height: 60px; } #footer { background-color: #eee; } /* Lastly, apply responsive CSS fixes as necessary */ @media (max-width: 767px) { #footer { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } 

Je voulais un pied collant flexible , c’est pourquoi je suis venu ici. Les meilleures réponses m’ont amené dans la bonne direction.

Le courant (2 Oct 16) Bootstrap 3 css Sticky footer (Taille fixe) ressemble à ceci:

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

Tant que le pied de page a une taille fixe, le bord inférieur du corps crée une pression pour permettre à la poche du pied de s’asseoir. Dans ce cas, les deux sont réglés sur 60 pixels. Mais si le pied de page n’est pas fixe et dépasse 60px de hauteur, il couvrira le contenu de votre page.

Rendre flexible: Supprimez la marge du corps CSS et la hauteur du pied de page. Ajoutez ensuite JavaScript pour obtenir la hauteur du pied de page et définissez le body marginBottom. Cela se fait avec la fonction setfooter (). Ensuite, ajoutez des écouteurs d’événement pour le premier chargement de la page et lors du redimensionnement de celui-ci. Remarque: Si votre pied de page a un accordéon ou toute autre chose qui déclenche un changement de taille, sans redimensionnement de la fenêtre, vous devez appeler à nouveau la fonction setfooter ().

Exécutez l’extrait, puis plein écran pour le démo.

 function setfooter(){ var ht = document.getElementById("footer").scrollHeight; document.body.style.marginBottom = ht + "px"; } window.addEventListener('resize', function(){ setfooter(); }, true); window.addEventListener('load', function(){ setfooter(); }, true); 

 html { position: relative; min-height: 100%; } .footer { position: absolute; bottom: 0; width: 100%; /* additional style for effect only */ text-align: center; background-color: #333; color: #fff; } body{ /* additional style for effect only not needed in bootstrap*/ padding:0; margin: 0; } 

 
 Page content 
 
 line 3 
 
 line 5 
 
 line 7 
  

Pour résumer tout cela, gardez une chose en tête: tout ce qui sauf le pied de page doit avoir une min-height: 100% ou un peu moins.

J’écris mon code de bas de page collé simplifié avec un remplissage avec LESS. Cette réponse est probablement hors sujet car la question ne parle pas de remplissage, donc si cela vous intéresse, consultez ce message pour plus de détails.

 @footer-padding: 40px; // Set here the footer padding @footer-inner-height: 150px; // Set here the footer height (without padding) /* Calculates the overall footer height */ @footer-height: @footer-inner-height + @footer-padding*2; html { position: relative; min-height: 100%; } body { /* This avoids footer to overlap the page content */ margin-bottom: @footer-height; } footer{ /* Fix the footer on bottom and give it fixed height */ position: absolute; bottom: 0; width: 100%; height: @footer-height; padding: @footer-padding 0; } 

Js simple

 if ($(document).height() <= $(window).height()) { $("footer").addClass("navbar-fixed-bottom"); } 

Sur la base de la réponse de Jek-fdrv , j’ai ajouté une

 $(window).on('resize', function() { if ($(document).height() <= $(window).height()) { $('footer').addClass("navbar-fixed-bottom"); } else { $('footer').removeClass("navbar-fixed-bottom"); } }); 

La version actuelle de bootstrap ne semble plus fonctionner pour cette fonction. Si vous téléchargez leur exemple sticky-footer-navbar et placez une grande quantité de contenu dans la zone principale du corps, le pied de page sera repoussé au bas de la fenêtre d’affichage. Ce n’est pas collant du tout.

Voici une solution basée sur CSS pour un pied de page collant à hauteur variable entièrement réactif.
Avantage: le pied de page permet une hauteur variable, car la hauteur n’a plus besoin d’être codée en dur en CSS.

 body { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -moz-box-orient: vertical; -moz-box-direction: normal; -ms-flex-direction: column; flex-direction: column; min-height: 100vh; } body > * { -webkit-box-flex: 0; -webkit-flex-grow: 0; -moz-box-flex: 0; -ms-flex-positive: 0; flex-grow: 0; } body > nav + .container { -webkit-box-flex: 1; -webkit-flex-grow: 1; -moz-box-flex: 1; -ms-flex-positive: 1; flex-grow: 1; } /* Reset CSS and some footer styling. Only needed on StackOverflow */ body { padding: 50px 0 0; margin: 0; } footer { background-color: #f8f8f8; padding: 15px 0 5px; border-top: 1px solid #e7e7e7; } 

        
 
 
Responsive sticky footer of any height
 
 
You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.
 
  

dans les mots de Haml & Sass, tout ce qui est nécessaire:

Haml pour app/view/layouts/application.html.haml

 %html %head %body Some body stuff %footer footer content 

Sass pour app/assets/stylesheets/application.css.sass

 $footer-height: 110px html position: relative min-height: 100% body margin-bottom: $footer-height body > footer position: absolute bottom: 0 width: 100% height: $footer-height 

basé sur http://getbootstrap.com/examples/sticky-footer-navbar/

Si vous ne voulez pas utiliser la construction bootstrap dans les classes pour le pied de page. Vous devriez aussi écrire du javascript:

 $(document).ready(function(){ $.fn.resize_footer(); $(window).resize(function() { $.fn.resize_footer(); }); }); (function($) { $.fn.resize_footer = function(){ $('body > .container-fluid').css('padding-bottom', $('body > footer').height()); }; }); 

Cela évitera le chevauchement du contenu par le pied de page fixe et ajustera le padding-bottom lorsque l’utilisateur changera la taille de la fenêtre / de l’écran.

Dans le script ci-dessus, je suppose que le pied de page est placé directement dans la balise body comme suit:

  ... content of your page ... 
 
 
 Something useful 
 ... some other footer content ... 
 
  

Ce n’est certainement pas la meilleure solution (à cause du JS qui pourrait être évité), mais cela fonctionne sans aucun problème de chevauchement, il est facile à implémenter et réactif (la height n’est pas codée en dur en CSS).

Voici un pied de page très simple et propre que vous pouvez utiliser dans le bootstrap. Totalement réactif!

HTML

CSS

 html { position: relative; min-height: 100%; } body { margin: 0 0 100px; } footer { position: absolute; left: 0; bottom: 0; height: 100px; width: 100%; background-color: red; } 

Exemple: démo CodePen

L’utilisation de flexbox est la méthode la plus simple que j’ai trouvée, à partir des astuces CSS . C’est vrai, ça marche quand le contenu est <100% de la page et> 100% de la page:

  
 content 
   

Et CSS:

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

Notez que ceci est agnostique pour le bootstrap, donc cela fonctionne avec bootstrap et sans elle.

Vous pouvez simplement essayer d’append une classe sur votre barre de navigation:

 navbar-fixed-bottom 

Ensuite, créez un CSS nommé custom.css et le remplissage de corps comme ceci ..

 body { padding-bottom: 70px; } 

Il suffit d’utiliser flex! Assurez-vous d’utiliser body and main dans votre code HTML et c’est l’une des meilleures solutions (sauf si vous avez besoin du support IE9). Il ne nécessite pas de hauteur fixe ou similaire.

C’est aussi recommandé pour Materialise!

 body { display: flex; min-height: 100vh; flex-direction: column; } main { flex: 1 0 auto; } 

Cela a été résolu par Flexbox, une fois pour toutes:

https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Le HTML

  
…
 
…
   

Le CSS

 .Site { display: flex; min-height: 100vh; flex-direction: column; } .Site-content { flex: 1; }