web-dev-qa-db-fra.com

Pied de page collant Twitter Bootstrap 3

J'utilise le framework de démarrage Twitter depuis un bon moment maintenant et ils ont récemment mis à jour la version 3!

Je ne parviens pas à faire coller le pied de page collant au bas de la page. J'ai utilisé le modèle de départ fourni par le site Web Twitter Bootstrap, mais toujours pas de chance, des idées?

htmlcsstwitter-bootstraptwitter-bootstrap-3
193
Brad Fletcher

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

<div class="footer navbar-fixed-bottom">
186
Jon

En vous 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 code 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 l'essentiel HTML:

<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 sticky-footer exmaple .

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

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

150
tkymtk

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

Exemple ici: Easy Sticky Footer

Il suffit de copier et coller ceci directement dans votre code. Pas de chichi, pas de muss.

<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>
50
anataliocs

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

La structure de base pour le 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 vue

34
David Taiaroa

Je suis un peu en retard sur le sujet, mais je suis tombé sur ce message car je viens juste de me faire piquer par cette question et j'ai enfin trouvé un moyen très simple de surmonter le problème. Utilisez simplement un navbar avec la classe navbar-fixed-bottom 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

28
iMil

Voici le code simplifié/ Sticky Footer à compter d'aujourd'hui car il est toujours optimisé 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;
}
27
Leniel Maccaferri

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

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

Le Push div devrait aller juste après le wrap, PAS à l’intérieur de 

<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>
2
Joseph

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;
}
2
Andi Giga

Js simple

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

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 bootstrap 3 css actuel (taille fixe) (2 oct 16) 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 à un pied de poche 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 60px, il couvrira le contenu de votre page.

Rendre flexible: Supprimez la marge css et la hauteur du pied de page css. 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 programmes d’écoute d’événements pour le premier chargement de la page et le redimensionnement lors de l’exécution de setfooter. Remarque: Si votre pied de page dispose d'un accordéon ou de tout autre élément entraînant un changement de taille, sans redimensionnement de la fenêtre, vous devez à nouveau appeler la fonction setfooter ().

Exécutez l'extrait puis en 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;
  }
<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>

2
Sterner

J'écris mon code de pied de page collant simplifié avec un rembourrage avec LESS. Cette réponse est probablement hors sujet car la question ne parle pas de remplissage, 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;
}
1
Fred K

Voici une solution basée sur CSS pour un pied de page collant à hauteur variable entièrement réactif.
Avantage: footer autorise une hauteur variable, car elle n’a plus besoin d’être codée en dur dans 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<!DOCTYPE html>

     <!-- Fixed navbar -->
    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <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 id="navbar" 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" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></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 role="separator" 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>
    </nav>

    <!-- Begin page content -->
    <div class="container">
      <div class="page-header">
        <h1>Responsive sticky footer of any height</h1>
      </div>
      <p class="lead">You can have a sticky footer of any height using this CSS. It's also fully responsive, no JavaScript needed.</p>
      
    </div>

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

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

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

Basé sur La réponse de Jek-fdrv , j'ai ajouté une .on('resize', function() pour m'assurer qu'elle fonctionne sur tous les appareils et toutes les résolutions:

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

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

1
CJ Catalano

Ceci 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;
}
1
Konstantin Schubert

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

1
kshirish

Utiliser flexbox est le moyen le plus simple que j'ai trouvé, de la part de CSS-tricks . Ceci est vrai, 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 ceci est bootstrap-agnostic, donc cela fonctionne avec bootstrap et sans lui.

0
bustawin

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: Démo CodePen

0
Gothburz

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

navbar-fixed-bottom

Créez ensuite un CSS nommé custom.css et body padding comme ceci.

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

Si vous souhaitez utiliser les classes de construction bootstrap 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 empêchera le contenu de se chevaucher 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, j'ai supposé que le pied de page est placé directement à l'intérieur de la balise body comme ceci:

<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 (à cause du JS qui pourrait être évité), mais cela fonctionne sans aucun problème de chevauchement, il est facile à implémenter et réactif (height n'est pas codé en dur en CSS).

0
jmarceli

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

0
equivalent8

#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>

0
Gpak

Il suffit d'utiliser 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 de la prise en charge de 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;
}
0
kentor