Bootstrap 3 Rincez le pied au bas. pas fixe

J’utilise Bootstrap 3 pour un site que je conçois.

Je veux avoir un pied de page comme cet échantillon. Échantillon

S’il vous plaît noter que je ne le veux pas FIXE donc bootstrap navbar-fixed-bottom ne résout pas mon problème. Je veux juste qu’il soit toujours au bas du contenu et aussi réactif.

Tout guide sera très apprécié.


MODIFIER:

Désolé si je n’étais pas clair. Qu’est-ce qui se passe maintenant est que lorsque le corps de contenu n’a pas assez de contenu. Mon pied de page monte et laisse un espace vide en bas.

C’est ce que j’ai maintenant pour ma barre de navigation

 

CSS

 .navbar-bottom { min-height: 300px; margin-top: 100px; background-color: #28364f; padding-top: 35px; color:#FFFFFF; } 

Voir l’exemple ci-dessous. Cela positionnera votre pied de page à coller au bas si la page a moins de contenu et se comporte comme un pied de page normal si la page a plus de contenu.

CSS

 * { margin: 0; } html, body { height: 100%; } .wrapper { min-height: 100%; height: 100%; margin: 0 auto -155px; /* the bottom margin is the negative value of the footer's height */ } .footer, .push { height: 155px; /* .push must be the same height as .footer */ } 

HTML

 

Your website content here.


MISE À JOUR : La nouvelle version de Bootstrap montre comment append un sticky footer sans append de wrapper. S’il vous plaît voir la réponse de Jboy Flaga pour plus de détails.

Il y a une solution simplifiée de bootstrap ici (où vous n’avez pas besoin de créer une nouvelle classe): http://getbootstrap.com/examples/sticky-footer-navbar/

Lorsque vous ouvrez cette page, cliquez avec le bouton droit sur un navigateur et sur “Afficher la source” et ouvrez le fichier sticky-footer-navbar.css ( http://getbootstrap.com/examples/sticky-footer-navbar/sticky-footer-navbar). css )

vous pouvez voir que vous avez seulement besoin de ce 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; } 

pour ce HTML

  ...   
...

MISE À JOUR: Cela ne répond pas directement à la question dans son intégralité, mais d’autres peuvent trouver cela utile.

Ceci est le HTML pour votre pied de page réactif

 

Pour le CSS

 footer{ width:100%; min-height:100px; background-color: #222; /* This color gets inverted color or you can add navbar inverse class in html */ } 

REMARQUE: Au moment de la publication de cette question, les lignes de code ci-dessus ne poussent pas le pied de page sous le contenu de la page. mais cela empêchera votre pied de ramper en plein milieu de la page lorsqu’il y a peu de contenu sur la page. Pour un exemple qui pousse le pied de page sous le contenu de la page, jetez un coup d’œil ici http://getbootstrap.com/examples/sticky-footer/

utilisez flexbox comme vous pouvez l’utiliser à votre disposition. La solution offerte par bootstrap 4, qui cherche toujours à superposer le contenu dans une présentation réactive, par exemple: elle se brisera en affichage mobile, je trouve que la meilleure solution consiste à utiliser la démo de la solution flexbox présentée ici 🙁 https://philipwalton.github.io / solved-by-flexbox / demos / sticky-footer / ) de cette façon, nous n’avons pas à gérer un problème de hauteur fixe qui est une solution obsolète à ce jour … cette solution fonctionne pour bootstrap 3 et 4, selon ce que vous utilisez.

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

Pour les personnes qui ont encore du mal et que la solution ne fonctionne pas comme vous le souhaitez, voici la solution la plus simple que j’ai trouvée.

Enveloppez votre contenu principal et atsortingbuez-lui une hauteur de vue minimale. Ajustez le 60 à la valeur de votre style.

 

Thats it et ça marche plutôt bien.

Galen Gidman a publié une très bonne solution au problème d’un pied collant sensible qui n’a pas de hauteur fixe. Vous pouvez trouver sa solution complète sur son blog: http://galengidman.com/2014/03/25/responsive-flexible-height-sticky-footers-in-css/

HTML

 

Site Title

Page content goes here.

Copyright, blah blah blah.

CSS

 html, body { height: 100%; } body { display: table; width: 100%; } .page-row { display: table-row; height: 1px; } .page-row-expanded { height: 100%; } 

Cette méthode utilise un balisage minimal. Il suffit de mettre tout votre contenu dans un fichier .wrapper qui a une marge inférieure et une marge négative inférieure à la hauteur du pied de page (dans mon exemple 100px).

 html, body { height: 100%; } /* give the wrapper a padding-bottom and negative margin-bottom equal to the footer height */ .wrapper { min-height: 100%; height: auto; margin: 0 auto -100px; padding-bottom: 100px; } .footer { height: 100px; }  

Your website content here.

Pour Bootstrap:

  

Le principal défaut des solutions ci-dessus est qu’elles ont une hauteur fixe pour le pied de page.
Et cela ne fait tout simplement pas l’affaire dans le monde réel, où les gens utilisent un nombre infini d’appareils et ont cette mauvaise habitude de les faire tourner quand on s’y attend le moins et ** Poof! ** le contenu de votre page est placé derrière le pied de page!

Dans le monde réel, vous avez besoin d’une fonction qui calcule la hauteur du pied de page et ajuste dynamicment le fond du contenu de la page pour l’adapter à cette hauteur. Et vous devez exécuter cette fonction minuscule sur load événements de load et de resize page, ainsi que sur DOMSubtreeModified (si votre pied de page est mis à jour de manière asynchrone ou s’il contient des éléments animés qui changent de taille).

Voici une preuve de concept, utilisant jQuery v3.0.0 et Bootstrap v4-alpha , mais il n’y a aucune raison pour que cela ne fonctionne pas sur les versions inférieures de chacun.

 jQuery(document).ready(function( $ ) { $.fn.accomodateFooter = function(){ var footerHeight = $('footer').outerHeight(); $(this).css({'padding-bottom':footerHeight+'px'}); } // accomodate footer after its html has changed $('footer').on('DOMSubtreeModified', function(){ $('body').accomodateFooter(); }) // accomodate footer on page load and resize $(window).on('load resize', function(){ $('body').accomodateFooter(); }) $('body').accomodateFooter(); window.addMoreContentToFooter = function() { var f = $('footer'); f.append($('

',{ text:"Human give me attention meow flop over sun bathe licks your face wake up wander around the house making large amounts of noise jump on top of your human's bed and fall asleep again. Throwup on your pillow sun bathe. The dog smells bad jump around on couch, meow constantly until given food, so nap all day, yet hiss at vacuum cleaner."})) .append($('
')); } });
 body { min-height: 100vh; position: relative; padding-top: 54px; } footer { background-color: rgba(0,0,0,.65); color: white; position: absolute; bottom: 0; width: 100%; padding: 1.5rem; display: block; } footer hr { border-top: 1px solid rgba(0,0,0,.42); border-bottom: 1px solid rgba(255,255,255,.21); } 
      

Feed that footer - not a game (yet!)

You will notice the body bottom padding is growing to accomodate the height of the footer as you feed it (so the page contents do not get covered by it).


Note: I used jQuery v3.1.1-slim and Bootstrap v4-alpha-6 but there is no reason why it shouldn't work with lower versions of each.
I am a footer with dynamic content.

Aucune de ces solutions ne fonctionnait parfaitement pour moi car j’ai utilisé la classe navbar-inverse dans mon pied de page. Mais j’ai eu une solution qui fonctionnait et sans Javascript. Utilisé Chrome pour faciliter la création de requêtes multimédia. La hauteur du pied de page change à mesure que l’écran est redimensionné. Vous devez donc faire attention à cela et ajuster en conséquence. Votre contenu de pied de page (je définis id = “footer” pour définir mon contenu) doit utiliser postion = absolute et bottom = 0 pour le conserver en bas. Aussi largeur: 100%. Voici mon CSS avec les requêtes média. Vous devrez ajuster min-width et max-width et append ou supprimer des éléments:

 #footer { position: absolute; color: #ffffff; width: 100%; bottom: 0; } @media only screen and (min-width:1px) and (max-width: 407px) { body { margin-bottom: 275px; } #footer { height: 270px; } } @media only screen and (min-width:408px) and (max-width: 768px) { body { margin-bottom: 245px; } #footer { height: 240px; } } @media only screen and (min-width:769px) { body { margin-bottom: 125px; } #footer { height: 120px; } } 

Ou ca

 

This is a footer