Bootstrap 3 Affleurez le pied de page jusqu'en bas. pas fixe

177

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

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

Veuillez noter que je ne veux pas qu'il soit FIXE, donc bootstrap navbar-fixed-bottom ne résout pas mon problème. Je veux juste que ce soit toujours au bas du contenu et aussi réactif.

Tout guide sera très apprécié.

ÉDITER:

Désolé si je n'étais pas clair. Ce qui se passe maintenant, c'est que lorsque le corps du contenu n'a pas assez de contenu. Mon pied de page monte puis laisse un espace vide en bas.

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

<nav class="navbar navbar-inverse navbar-bottom" style="padding:0 0 120px 0">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <h5 id='footer-header'> SITEMAP </h3>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>News</p>
                        <p>contact</p>
                    </div>
                    <div class="col-sm-4" style="padding: 0 0 0 0px">
                        <p>FAQ</p>
                        <p>Privacy Policy</p>
                    </div>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxx </h3>
                    <p>yyyyyyyyyyyyy</p>
                </div>
                <div class="col-sm-4">
                    <h5 id='footer-header'> xxxxx </h3>
                    <p>uuuuuuuuuuuuuuu</p>
                </div>
            </div>
        </div>
    </nav>

CSS

.navbar-bottom {
min-height: 300px;
margin-top: 100px;
background-color: #28364f;
padding-top: 35px;
color:#FFFFFF;
}
html css twitter-bootstrap footer user3169403
la source
Avez-vous un exemple de code sur lequel vous travaillez et qui vous pose un problème?
badAdviceGuy
Cela ressemble à un pied de page normal, si vous ne voulez pas de Fixe, vous pouvez mettre à jour le style. Quel problème rencontrez-vous?
Mutant
Quand c'est la dernière chose dans votre HTML, ce sera toujours en bas. Question déroutante qui nécessite un exemple de code pour comprendre quel est le problème.
Joe Conlin
stackoverflow.com/questions/643879/…
davidpauljunior
@davidpauljunior: Ce sont des pieds de page collants qui ne sont pas ce que je recherche
user3169403

Réponses:

124

Voir l'exemple ci-dessous. Cela positionnera votre pied de page pour qu'il reste en 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

<div class="wrapper">
  <p>Your website content here.</p>
  <div class="push"></div>
</div>
<div class="footer">
  <p>Copyright (c) 2008</p>
</div>

MISE À JOUR : La nouvelle version de Bootstrap montre comment ajouter un pied de page collant sans ajouter de wrapper. Veuillez consulter la réponse de Jboy Flaga pour plus de détails.

Surjith SM
la source
Vos liens sont rompus
Halter
2
Pourquoi existe-t-il deux définitions de propriété de hauteur dans le wrapper?
HardlyNoticeable
@HardlyNoticeable a une largeur minimale pour forcer le wrapper même si le contenu est inférieur.
Surjith SM
Je me demande toujours pourquoi il existe deux définitions de propriétés de hauteur. Vous n'avez pas répondu @SurjithSM
Erowlin
@Erowlin C'est une erreur. vous n'avez pas besoin de deux propriétés de hauteur. Seule la hauteur minimale suffira, a modifié la réponse.
Surjith SM
316

Il existe 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, faites un clic droit sur un navigateur et "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 n'avez besoin que 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

<html>
    ...
    <body>
        <!-- Begin page content -->
        <div class="container">
        </div>
        ...

        <footer class="footer">
        </footer>
    </body>
</html>
Jboy Flaga
la source
19
Ceci (à partir des documents / exemples Bootstrap) devrait être la réponse acceptée.
richardm
5
Pour moi, cela ne fonctionne pas car mon pied de page est plutôt haut. C'est génial si vous voulez juste un paragraphe mais le mien a plusieurs colonnes - en utilisant cette méthode, je me retrouve avec une marge sous le pied de page quand je descends dans des tailles plus petites
NightMICU
9
N'est-ce pas la solution de pied de page collant Bootstraps? Je ne pense pas que l'OP signifiait cela. Pour moi, avec une page longue, mon pied de page est apparu en bas de l'écran mais pas en bas du contenu (c'est-à-dire sur le contenu). J'ai dû changer de position: absolue; à relative (dans la classe .footer) pour que cela fonctionne.
Tino Mclaren
24
Ce serait la bonne réponse si ce sujet n'avait pas "non corrigé" dans le titre ...
ruudy
1
cela ne fonctionne que pour les pieds de page de taille fixe, je préfère la solution de Philip Walton proposée par @ChristopherTan qui est super mince et indépendante de la hauteur du pied de page
buergi
16

utilisez flexbox car vous pouvez l'utiliser à votre disposition. La solution offerte par bootstrap 4 recherche toujours le contenu de chevauchement dans une mise en page réactive, par exemple: il se cassera dans la vue mobile, je tombe sur l'astuce la plus soignée est d'utiliser la démo de la solution flexbox présentée ici: ( https://philipwalton.github.io / résolved-by-flexbox / demos / sticky-footer / ) de cette façon, nous n'avons pas à traiter le problème de hauteur fixe qui est une solution obsolète maintenant ... cette solution fonctionne pour bootstrap 3 et 4, quel que soit celui que vous utilisez.

<body class="Site">
  <header>…</header>
  <main class="Site-content">…</main>
  <footer>…</footer>
</body>

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

.Site-content {
  flex: 1;
}
Christopher Tan
la source
1
C'est une solution très intelligente. Je pense que CSS a trop à offrir que nous ne savons même pas comment en tirer le meilleur parti.
Gilbert
2
J'adore cette solution. Incroyable.
Bagus Aji Santoso
14

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

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

<footer class="footer navbar-fixed-bottom">
     <div class="container">
     </div>
</footer>

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 page d'explorer à mi-chemin 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 œil ici http://getbootstrap.com/examples/sticky-footer/

Rex CoolCode Charles
la source
C'est en fait une mauvaise solution, car le pied de page couvre le contenu principal lorsqu'ils se rencontrent. Vous devez définir le padding-bottomdu conteneur de contenu principal égal à la hauteur du pied de page. Et vous devez le faire de manière dynamique sur la page loadet les resizeévénements et aussi sur le pied de page DOMSubtreeModified.
tao du
9

Pour les personnes qui ont encore des difficultés et que la solution ne fonctionne pas exactement comme vous le souhaitez, voici la solution la plus simple que j'ai trouvée.

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

<div id="content" style="min-height:60vh"></div>
<div id="footer"></div>

C'est tout et ça marche plutôt bien.

eGlu
la source
J'ai eu le même problème que celui en question. Après avoir essayé presque toutes les réponses hautement classées ici, c'est la seule qui a fonctionné pour moi. Et cela a fonctionné dans toutes les tailles. Le seul changement que j'ai fait était "hauteur min: 70vh". Cela dépendra de la taille de l'en-tête et du pied de page de votre site.
Arfath
Cela devrait être plus élevé, fonctionne exactement comme demandé.
yam
Cela a fonctionné pour mes besoins. Ajustez simplement la valeur de hauteur minimale jusqu'à ce que vous obteniez le résultat souhaité.
sawyerrken
Merveilleux, c'est la solution la plus simple et la plus efficace au problème de placement du pied de page!
Prahlad Yeri
5

Galen Gidman a publié une très bonne solution au problème d'un pied de page collant réactif 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

<header class="page-row">
  <h1>Site Title</h1>
</header>

<main class="page-row page-row-expanded">
  <p>Page content goes here.</p>
</main>

<footer class="page-row">
  <p>Copyright, blah blah blah.</p>
</footer>

CSS

html,
body { height: 100%; }

body {
  display: table;
  width: 100%;
}

.page-row {
  display: table-row;
  height: 1px;
}

.page-row-expanded { height: 100%; }
weiy
la source
Cela semble être compatible avec bootstrap, et devrait donc être la réponse acceptée, à mon humble avis. Ce n'est pas parfait, car une barre de défilement horizontale semble apparaître.
Florian Mertens
Florian: Pas de barre de défilement horizontale pour moi.
HardlyNoticeable
4

Pour une solution CSS pure, faites défiler après le 2ème <hr>. La première est la réponse initiale (donnée en 2016)

Le défaut majeur des solutions ci-dessus est qu'elles ont une hauteur fixe pour le pied de page.
Et cela ne suffit pas dans le monde réel, où les gens utilisent un million d'appareils et ont cette mauvaise habitude de les faire pivoter quand on s'y attend le moins et ** Poof!** il y a le contenu de votre page 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 dynamiquement le contenu de la page padding-bottompour s'adapter à cette hauteur. Et vous devez exécuter cette petite fonction sur la page loadet les resizeévénements ainsi que sur le pied de page DOMSubtreeModified(juste au cas où votre pied de page serait mis à jour dynamiquement de manière asynchrone ou s'il contiendrait des éléments animés qui changent de taille lorsqu'ils interagissent avec).

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

Afficher l'extrait de code

Au départ, j'ai publié cette solution ici, mais j'ai réalisé qu'elle pourrait aider plus de personnes si elle était publiée sous cette question.

Note: J'ai délibérément enveloppé le $([selector]).accomodateFooter()comme un plugin jQuery, il pourrait être exécuté sur tout élément DOM, comme dans la plupart des dispositions n'est pas le $('body')« s bottom-paddingque les besoins de réglage, mais certaines pages wrapper élément avec position:relative(habituellement le parent immédiat du footer) .

Modification ultérieure (3 ans et plus après la réponse initiale):

À ce stade, je ne considère plus acceptable d'utiliser JavaScript pour positionner un pied de page de contenu dynamique en bas de page. Cela peut être réalisé avec CSS seul, en utilisant flexbox, ultra-rapide, multi-navigateur.

C'est ici:

Afficher l'extrait de code

tao
la source
3

Cette méthode utilise un balisage minimal. Mettez simplement tout votre contenu dans un .wrapper qui a un fond de remplissage et une marge négative égale à 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;
}

<body>

<div class="wrapper">
  <p>Your website content here.</p>
</div>
<div class="footer">
   <p>Copyright (c) 2014</p>
</div>

</body>
Vin
la source
2

Ou ca

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>
AnBisw
la source
1

Pour Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>
Shilovk
la source
2
La question indique spécifiquement que ce navbar-fixed-bottomn'est PAS ce qui résout le problème.
p4sh4
1

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 a fonctionné et sans Javascript. Utilisation de Chrome pour aider à former des requêtes multimédias. La hauteur du pied de page change à mesure que l'écran se redimensionne, vous devez donc faire attention à cela et ajuster en conséquence. Le contenu de votre pied de page (j'ai défini id = "footer" pour définir mon contenu) doit utiliser postion = absolute et bottom = 0 pour le garder en bas. Aussi largeur: 100%. Voici mon CSS avec des requêtes multimédias. Vous devrez ajuster la largeur minimale et la largeur maximale et ajouter ou supprimer certains é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; 
    }
}
Brian Edwards
la source