Flushing footer to bottom de la page, twitter bootstrap

Je suis généralement familier avec la technique de vidage d’un pied de page en utilisant css et cette approche suivante .

Mais j’ai du mal à faire fonctionner cette approche pour le bootstrap Twitter, probablement en raison du fait que le bootstrap de Twitter est réactif par nature. En utilisant Twitter bootstrap, je ne parviens pas à faire en sorte que le pied de page soit aligné en bas de la page en utilisant l’approche décrite dans le billet de blog ci-dessus.

Trouvé les extraits ici fonctionne vraiment bien pour bootstrap

Html:

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

Source: Démo et didacticiel (n’est plus disponible; RIP )

Ceci est maintenant inclus avec Bootstrap 2.2.1.

Utilisez le composant navbar et ajoutez la .navbar-fixed-bottom :

  

N’oubliez pas d’append du body { padding-bottom: 70px; } body { padding-bottom: 70px; } ou bien le contenu de la page peut être couvert.

Docs: http://getbootstrap.com/components/#navbar-fixed-bottom

Un exemple de travail pour le bootstrap Twitter NOT STICKY FOOTER

  

Vous avez besoin d'au moins un élément avec un #footer

Si vous ne voulez pas la barre de défilement si le contenu est adapté à l'écran, changez simplement la valeur de 10 à 0
La barre de défilement apparaîtra si le contenu ne correspond pas à l'écran.

Voici comment mettre en œuvre cela depuis la page officielle:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Je viens juste de le tester et ça marche super bien! 🙂

HTML

   

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

Le code CSS correspondant est le suivant:

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

Pour Sticky Footer, nous utilisons deux DIV's dans le HTML pour un effet de bas de page . Ecrivez comme ceci:

HTML

 

CSS

 body,html { height:100%; } .container { min-height:100%; } .footer { height:40px; margin-top:-40px; } 

Exemple officiel beaucoup plus simple: http://getbootstrap.com/examples/sticky-footer-navbar/

 html { position: relative; min-height: 100%; } body { margin-bottom: 60px; } .footer { position: absolute; bottom: 0; width: 100%; height: 60px; background-color: #f5f5f5; } 

Eh bien, j’ai trouvé un mélange de navbar-inner et navbar-fixed-bottom

  

Ca a l’air bien et ça marche pour moi

entrer la description de l'image ici

Voir exemple dans Fiddle

Cela a fonctionné pour moi parfaitement.

Ajoutez cette classe navbar-fixed-bottom à votre pied de page.

  

Je l’ai utilisé comme ceci:

  

Et il se couche sur toute la largeur.

Edit: Cela définira le pied de page comme étant toujours visible, c’est quelque chose que vous devez prendre en compte.

Vous devez envelopper votre div .container-fluid pour que votre sticky fonctionne, il vous manque également certaines propriétés de votre classe .wrapper . Essaye ça:

Retirez le padding-top:70px de votre étiquette et .container-fluid plutôt dans votre .container-fluid , comme ceci:

 .wrapper > .container-fluid { padding-top: 70px; } 

Nous devons le faire parce que pousser le body vers le bas pour accommoder la barre de navigation finit par pousser le pied de page un peu plus loin (70px plus loin) au-delà de la fenêtre d’affichage pour obtenir une barre de défilement. Nous obtenons de meilleurs résultats en poussant la div.

Ensuite, nous devons supprimer la classe .wrapper dehors de votre div .container-fluid et envelopper votre #main div, comme ceci:

 
...

Votre pied de page doit bien sûr être en dehors de la div .wrapper alors retirez-le du div .wrapper et placez-le à l’extérieur, comme ceci:

 
....
....

Une fois que tout est fait, rapprochez correctement votre pied de page de votre classe .wrapper en utilisant une marge négative, comme ceci:

 .wrapper { min-height: 100%; height: auto !important; /* ie7 fix */ height: 100%; margin: 0 auto -43px; } 

Et cela devrait fonctionner, même si vous allez probablement devoir modifier quelques autres éléments pour le faire fonctionner lorsque l’écran est redimensionné, comme si vous réinitialisiez la hauteur de la classe .wrapper , comme ceci:

 @media (max-width:480px) { .wrapper { height:auto; } } 

C’est la bonne façon de le faire avec Twitter Bootstrap et la nouvelle classe navbar-fixed-bottom: (vous n’avez aucune idée de combien de temps j’ai passé à chercher cela)

CSS:

 html { position: relative; min-height: 100%; } #content { padding-bottom: 50px; } #footer .navbar{ position: absolute; } 

HTML:

   
...

La réponse de HenryW est bonne, bien que j’aie besoin de quelques ajustements pour la faire fonctionner comme je le souhaitais. En particulier, les éléments suivants traitent également:

  • Eviter le “saut” sur le chargement de la page en marquant d’abord invisible et le réglage visible en javascript
  • Traiter les redimensionnements du navigateur avec élégance
  • En outre, si le navigateur devient plus petit et que le pied de page devient plus grand que la page
  • Réglage de la hauteur

Voici ce qui a fonctionné pour moi avec ces réglages:

HTML:

  

CSS:

 #footer { padding-bottom: 30px; } 

JavaScript:

 function setFooterStyle() { var docHeight = $(window).height(); var footerHeight = $('#footer').outerHeight(); var footerTop = $('#footer').position().top + footerHeight; if (footerTop < docHeight) { $('#footer').css('margin-top', (docHeight - footerTop) + 'px'); } else { $('#footer').css('margin-top', ''); } $('#footer').removeClass('invisible'); } $(document).ready(function() { setFooterStyle(); window.onresize = setFooterStyle; }); 

Dans la dernière version de bootstrap 4-alpha , j’ai pu le faire en utilisant la classe .fixed-bottom .

 

Voici comment je l’utilise avec le pied de page:

 

© 2017 Company, Inc.

Vous trouverez plus d’informations dans la documentation de placement ici .

Utilisez le composant navbar et ajoutez la classe .navbar-fixed-bottom:

  

append du corps

  { padding-bottom: 70px; } 

pour gérer les dispositions de contrainte de largeur, utilisez ce qui suit pour ne pas avoir de coins arrondis et pour que votre barre de navigation soit alignée sur les côtés de l’application

  

alors vous pouvez utiliser css pour remplacer les classes de bootstrap pour ajuster la hauteur, la police et la couleur

  .navbar-fixed-bottom { font-size: 12px; line-height: 18px; } .navbar-fixed-bottom .navbar-inner { min-height: 22px; } .navbar-fixed-bottom .p { margin: 2px 0 2px; } 

Vous pouvez utiliser jQuery pour gérer ceci:

 $(function() { /** * Read the size of the window and reposition the footer at the bottom. */ var stickyFooter = function(){ var pageHeight = $('html').height(); var windowHeight = $(window).height(); var footerHeight = $('footer').outerHeight(); // A footer with 'fixed-bottom' has the CSS atsortingbute "position: absolute", // and thus is outside of its container and counted in $('html').height(). var totalHeight = $('footer').hasClass('fixed-bottom') ? pageHeight + footerHeight : pageHeight; // If the window is larger than the content, fix the footer at the bottom. if (windowHeight >= totalHeight) { return $('footer').addClass('fixed-bottom'); } else { // If the page content is larger than the window, the footer must move. return $('footer').removeClass('fixed-bottom'); } }; // Call when this script is first loaded. window.onload = stickyFooter; // Call again when the window is resized. $(window).resize(function() { stickyFooter(); }); }); 

La technique la plus simple consiste probablement à utiliser Bootstrap navbar-static-bottom en même temps que la définition du conteneur principal avec height: 100vh (nouveau pourcentage de port de vue CSS3). Cela va vider le pied de page vers le bas.

 
some content

Testé avec Bootstrap 3.6.6 .

HTML

  

CSS

 .footer { bottom: 0; position: absolute; } 
 #wrap { min-height: 100%; height: auto !important; height: 100%; width: 100%; /*Negative indent footer by its height*/ margin: 0 auto -60px; position: fixed; left: 0; top: 0; } 

La hauteur du pied de page correspond à la taille du retrait inférieur de l’élément d’emballage.

 .footer { position: fixed; bottom: 0; left: 0; right: 0; height: 60px; } 

Le seul qui a fonctionné pour moi !:

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

Il semble que la height:100% “chaîne” est en train d’être brisée à la div#main . Essayez d’append de la height:100% à cela et cela peut vous rapprocher de votre objective.

Vous trouverez ici l’approche de HAML ( http://haml.info ) avec la barre de navigation en haut et en bas de la page:

 %body #main{:role => "main"} %header.navbar.navbar-fixed-top %nav.navbar-inner .container /HEADER .container /BODY %footer.navbar.navbar-fixed-bottom .container .row /FOOTER 

Rester simple.

 footer { bottom: 0; position: absolute; } 

Vous devrez peut-être également compenser la hauteur du pied de page en ajoutant une margin-bottom équivalente à la hauteur du pied de page du body .

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

Voici comment le bootstrap le fait:

http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Il suffit d’utiliser la source de la page et vous devriez pouvoir voir. N’oubliez pas le

un top.

une autre solution possible, en utilisant simplement des requêtes médias

 @media screen and (min-width:1px) and (max-width:767px) { .footer { } } /* no style for smaller or else it goes weird.*/ @media screen and (min-width:768px) and (max-width:991px) { .footer{ bottom: 0; width: 100%; position: absolute; } } @media screen and (min-width:992px) and (max-width:1199px) { .footer{ bottom: 0; width: 100%; position: absolute; } } @media screen and (min-width:1120px){ .footer{ bottom: 0; width: 100%; position: absolute; } } 

Utilisez la classe ci-dessous pour la pousser à la dernière ligne de la page et la placer au centre. Si vous utilisez la page HAML ruby ​​on rails, vous pouvez utiliser le code ci-dessous. %footer.card.text-center

Pls n’oubliez pas d’utiliser twitter bootstrapp