Twitter Bootstrap 3 Sticky Footer

204

J'utilise le framework bootstrap twitter depuis un bon moment maintenant et ils ont récemment mis à jour vers la version 3!

J'ai du mal à faire coller le pied de page collant vers le bas, j'ai utilisé le modèle de démarrage fourni par le site Web Twitter Bootstrap, mais toujours pas de chance, des idées?

html css twitter-bootstrap twitter-bootstrap-3 Brad Fletcher
la source
31
exemple officiel: getbootstrap.com/examples/sticky-footer-navbar
ptim
3
@memeLab pourquoi l'exemple officiel n'a rien sur le corps margin-bottom: -60px? Ou est-ce que je l'ai raté ...?
ganders
Ajout d'une solution CSS uniquement permettant une hauteur variable pour le pied de page collant. Lié ici car, étant une nouvelle réponse, c'est en bas de la page.
tao

Réponses:

194

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

<div class="footer navbar-fixed-bottom">
Jon
la source
32
ce n'est pas la même chose que le pied de page collant
Yura Omelchuk
3
Si vous avez un en-tête et un pied de page, vous perdez trop d'espace sur un appareil mobile.
strattonn
4
@strattonn c'est à ça que servent les requêtes des médias
Jacob Raccuia
20
Cela fonctionne parfaitement si la page n'a pas besoin d'un défilement. Mais le pied de page chevauche avec plus de contenu sur la page. Une solution à ce problème? Merci!
Xplora
1
Vous n'êtes pas sûr du problème de chevauchement, mais l'ajout de marge / remplissage ne résout-il pas le problème?
Jon
152

En se référant à l'exemple officiel du pied de page collant Boostrap3, il n'est pas nécessaire d'ajouter <div id="push"></div>, et le CSS est plus simple.

Le CSS utilisé dans l'exemple 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 le HTML essentiel:

<body>

    <!-- Wrap all page content here -->
    <div id="wrap">

      <!-- Begin page content -->
      <div class="container">

      </div>
    </div>

    <div id="footer">
      <div class="container">

      </div>
    </div>
</body>

Vous pouvez trouver le lien pour ce CSS dans le code source de l' exemple de bas de page .

<!-- Custom styles for this template -->
<link href="sticky-footer.css" rel="stylesheet">

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

tkymtk
la source
21
Le HTML et CSS dans l'exemple officiel de bas de page est maintenant très différent de ce qui est décrit ici, par exemple, aucun div «wrap» n'est plus utilisé.
IanB
52

Voici une méthode qui ajoutera un pied de page collant qui ne nécessite aucun CSS ou Javascript supplémentaire autre que ce qui est déjà dans Bootstrap et n'interférera pas avec votre pied de page actuel.

Exemple ici: Easy Sticky Footer

Copiez et collez ceci directement dans votre code. Pas de bruit, pas de bruit.

<div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <p class="navbar-text pull-left">© 2014 - Site Built By Mr. M.
           <a href="http://tinyurl.com/tbvalid" target="_blank" >HTML 5 Validation</a>
      </p>

      <a href="http://youtu.be/zJahlKPCL9g" class="navbar-btn btn-danger btn pull-right">
      <span class="glyphicon glyphicon-star"></span>  Subscribe on YouTube</a>
    </div>
</div>
anataliocs
la source
4
Très agréable et rapide. Peut également être réactif. Mais il est nécessaire d'ajouter un espace supplémentaire au bas du contenu de la page afin qu'il ne soit pas masqué par le pied de page. L'espace doit avoir une hauteur égale à la hauteur du pied de page. Pouvez-vous montrer comment le faire au mieux? BTW "ne nécessite aucun CSS" est techniquement erroné. Il devrait être "ne nécessite aucun CSS supplémentaire autre que les classes Bootstrap" .
ADTC
1
J'adore que cela exploite ce qui existe dans le bootstrap. Je n'ai pas pu obtenir les autres meilleures réponses au travail, mais en collant cela dans ma page et bam, footer collant. Merci!
haakon.io
34

En plus du CSS que vous venez d'ajouter, rappelez-vous que vous devez ajouter le push div avant de fermer le div de bouclage

La structure de base du HTML est 

<div id="wrap"> 
    page content here 
    <div id="push"></div>
</div> <!-- end wrap -->

<div id="footer">
    footer content here
</div> <!-- end footer -->

Vue en direct
Modifier la vue

David Taiaroa
la source
Si le contenu de la page est plus grand que l'affichage disponible, le pied de page sera poussé vers le bas. Je voudrais que le pied de page soit vraiment collé au bas (comme navbar-fixed-bottom)
blueFast
hey @delavnog, est-ce que quelque chose comme ça fonctionnerait pour vous? codepen.io/panchroma/pen/wMXWpY . Les seuls éléments importants pour vous sont le HTML à la ligne 647 et le CSS
David Taiaroa
@delavnog, même idée avec un contenu minimal sur la page codepen.io/panchroma/pen/JGZKqy
David Taiaroa
Merci, c'est super! Maintenant, si je pouvais obtenir le div principal centré verticalement entre nav et footer, ce serait génial! Modification de votre codepen: codepen.io/anon/pen/rxKMaW (j'ai dû ajouter une marge au corps, car la navigation
grignote
@delavnog, voici un début si le corps principal n'est pas trop haut. Il faudrait cependant plus de travail pour un contenu plus long: codepen.io/panchroma/pen/vLrXMq
David Taiaroa
30

Voici le code simplifié Sticky Footer à ce jour car ils l'optimisent toujours et c'est BON:

HTML

<!DOCTYPE html>
<html lang="en">
  <head></head>

  <body>

    <!-- Fixed navbar -->
    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li class="dropdown-header">Nav header</li>
                <li><a href="#">Separated link</a></li>
                <li><a href="#">One more separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Sticky footer with fixed navbar</h1>
      </div>
      <p class="lead">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 <code>padding-top: 60px;</code> on the <code>body > .container</code>.</p>
      <p>Back to <a href="../sticky-footer">the default sticky footer</a> minus the navbar.</p>
    </div>

    <footer>
      <div class="container">
        <p class="text-muted">Place sticky footer content here.</p>
      </div>
    </footer>

  </body>
</html>

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;
}
Leniel Maccaferri
la source
1
Solution parfaite. Voilà ce que je cherchais.
Levimatt
1
Malheureusement, ce pied de page a une taille fixe. Parfois, lorsque le pied de page est dynamique, il peut être plus grand ou plus petit que sa hauteur en CSS.
23
27

Je suis un peu en retard sur le sujet, mais je suis tombé sur ce post car je viens d'être mordu par cette question et j'ai finalement trouvé un moyen vraiment facile de le surmonter, utilisez simplement un navbaravec la navbar-fixed-bottomclasse activée. Par exemple:

<div class="navbar navbar-default navbar-fixed-bottom">
  <div class="container">
    <span class="navbar-text">
      Something useful
    </span>
  </div>
</div>

HTH

iMil
la source
J'aime la simplicité et l'efficacité de votre réponse, qui est d'ailleurs une réponse intelligente. De nombreuses réponses au même problème sont pleines de questions et de choses compliquées. Merci mec.
digitai
1
C'est une demi-solution, vous devez toujours prendre soin des chevauchements du contenu de votre page si vous le redimensionnez.
Baldráni
@ Baldráni Non, c'est une solution complète, les chevauchements fonctionnent bien si vous utilisez la ligne et la colonne Bootstrap dans le pied de page html (ce que vous devriez faire de toute façon)
Tino Mclaren
Ce n'est pas un pied de page collant. Il s'agit d'une barre de navigation à fond fixe qui ne convient qu'au contenu de la barre de navigation et chevauche le contenu de la page.
Zim
10

Voici ma solution mise à jour à 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 utilisez-le comme ceci: 

<div class="footer">
 <div class="site-footer">
  <ul class="site-footer-links">
        <li>© Zee and Company<span></span></li>
  </ul>
 </div>

</div>

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;
}
zee
la source
4
Ce n'est pas une bonne solution car votre pied de page est fixe, ce qui signifie qu'il chevauche le contenu de la page (le cas échéant). Essayez d'ajouter quelques some text<br>lignes avant le pied de page et réduisez la taille de la fenêtre.
jmarceli
@ user2041318: oui c'est horrible ... merci de l'avoir signalé.
Sebastian
Cela a été corrigé selon le commentaire de jmarceli. Le pied de page n'est plus fixe.
zee
3

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

#footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 3em;
}
Andi Giga
la source
CSS simple et bon vieux. Travail accompli. Je trouve amusant à quel point certaines des réponses les mieux notées sont alambiquées. Bootstrap n'est-il pas censé nous faciliter la vie? 😂
Kal
2

La poussée divdevrait aller juste après wrap, PAS à l'intérieur .. comme ça 

<div id="wrap">
  *content goes here*
</div>

<div id="push">
</div>

<div id="footer">
  <div class="container credit">
  </div>
  <div class="container">
    <p class="muted credit">© Your Page 2013</p>
  </div>
</div>
Joseph
la source
2

Répondu par le PO:

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;
  }
}
CodeCaster
la source
2

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

Le pied de page collant Bootstrap 3 css actuel (2 octobre 16) (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, la marge du bas du corps crée une poussée pour permettre à une poche pour le pied de page de s'asseoir. Dans ce cas, les deux sont réglés sur 60px. Mais si le pied de page n'est pas fixe et dépasse 60 pixels 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 corps marginBottom. Cela se fait avec la fonction setfooter (). Ajoutez ensuite des écouteurs d'événements pour le premier chargement de la page et le redimensionnement qui exécutent le setfooter. Remarque: Si votre pied de page a un accordéon ou toute autre chose qui déclenche un changement de taille, sans redimensionner la fenêtre, vous devez à nouveau appeler la fonction setfooter ().

Exécutez l'extrait de code, puis le mode plein écran pour le faire une démonstration.

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;
  }
<div>
  Page content
  <br>  <br>
  line 3
  <br>  <br>
  line 5
  <br>  <br>
  line 7
  
 </div>


<footer id="footer" class="footer">
      <div class="container">
        <p class="text-muted">Footer with a long text, so that resizing, to a smaller screen size, will cause the footer to grow taller. But the footer will not overflow onto the main page.</p>
      </div>
    </footer>
Développer l'extrait

Sterner
la source
2

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

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

Le HTML

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

Le CSS

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

.Site-content {
  flex: 1;
}
Konstantin Schubert
la source
2

Simple js

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

Mise à jour # 1

$(window).on('resize', function() {
    $('footer').toggleClass("navbar-fixed-bottom", $(document).height() <= $(window).height());
});
fdrv
la source
1

Pour résumer tout cela, gardez juste une chose à l'esprit que tout sauf le pied de page devrait avoir min-height: 100%ou un peu moins.

kshirish
la source
1

J'écris mon code de bas de page collant simplifié avec un rembourrage en utilisant MOINS. Cette réponse est probablement hors sujet car la question ne parle pas de rembourrage, donc si vous êtes intéressé, consultez cet article 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;
}
Fred K
la source
1

Sur la base de la réponse de Jek-fdrv , j'ai ajouté un .on('resize', function()pour m'assurer qu'il fonctionne sur chaque appareil et chaque résolution:

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

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

CJ Catalano
la source
1

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.

Afficher l'extrait de code

Et voici le préfixe SCSS(pour gulp/ grunt):

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  > * {
    flex-grow: 0;
  }
  > nav + .container {
    flex-grow: 1;
  }
}
tao
la source
1

Utilisez simplement flex! Assurez-vous d'utiliser body et 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 également recommandé pour Materialise!

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

main {
    flex: 1 0 auto;
}
kentor
la source
0

dans les mots 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/

équivalent8
la source
0

Si vous voulez utiliser le build bootstrap dans les classes pour le pied de page. Vous devez également é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());
  };
 });

Il empêchera le chevauchement de contenu par le pied de page fixe et ajustera la padding-bottom moment où l'utilisateur modifie la taille de la fenêtre / de l'écran.

Dans le script ci-dessus, j'ai supposé que le pied de page est placé directement à l'intérieur de la balise body comme ça:

<body>
  ... content of your page ...
  <div class="navbar navbar-default navbar-fixed-bottom">
    <div class="container">
      <div class="muted pull-right">
        Something useful
      </div>
      ... some other footer content ...
    </div>
  </div>
</body>

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

jmarceli
la source
0 

#myfooter{
height: 3em;
  background-color: #f5f5f5;
  text-align: center;
  padding-top: 1em;
}
<footer>
    <div class="footer">
        <div class="container-fluid"  id="myfooter">
            <div class="row">
                <div class="col-md-12">
                    <p class="copy">Copyright &copy; Your words</p>
                </div>
            </div>
        </div>
    </div>
</footer>
Développer l'extrait

Gpak
la source
Comment est-ce collant au fond?
Sebastian
0

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

HTML

<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="">
      </a>
    </div>
  </div>
</nav>
    <footer></footer>
</body>
</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: CodePen Demo

Gothburz
la source
Cette solution déplacera la barre de pied de page vers la droite lors de l'ouverture du bootstrap modal en raison du positionnement absolu!
thethakuri
0

L'utilisation flexboxest la façon la plus simple que j'ai trouvée, des gars de CSS-tricks . C'est un vrai pied de page, cela fonctionne lorsque le contenu est <100% de la page et> 100% de la page:

<body>
  <div class="content">
  content
</div>
<footer></footer>
</body>

Et CSS:

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

Notez que c'est indépendant du bootstrap, donc cela fonctionne avec et sans bootstrap.

bustawin
la source
0

Vous pouvez simplement essayer d'ajouter une classe sur votre barre de navigation de pied de page:

navbar-fixed-bottom

Ensuite, créez un CSS nommé custom.css et un remplissage de corps comme celui-ci.

body { padding-bottom: 70px; }
Ikram - Ud - Daula
la source