web-dev-qa-db-fra.com

Bootstrap 3 Rincez le pied de page au bas. non fixé

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

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

Veuillez noter que je ne le veux pas, donc bootstrap navbar-fixed-bottom ne résout pas mon problème. Je veux juste que ce soit toujours au bas du contenu et également 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 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;
}
htmlcsstwitter-bootstrapfooter
169
user3169403

Voir l'exemple ci-dessous. Cela placera votre pied de page en bas si la page a moins de contenu et se comportera 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>

UPDATE: La nouvelle version de Bootstrap montre comment ajouter un pied de page collant sans ajouter de wrapper. S'il vous plaît voir la réponse de Jboy Flaga pour plus de détails.

120
Surjith S M

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, cliquez avec le bouton droit de la souris sur un navigateur et sur "Afficher le source", puis 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

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

        <footer class="footer">
        </footer>
    </body>
</html>
306
Jboy Flaga

UPDATE: Cela ne répond pas directement à la question dans son intégralité, mais cela peut être utile à d’autres.

Ceci est le code HTML pour 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 de ramper au milieu de la page lorsqu'il y a peu de contenu sur la page. Pour un exemple concret, appuyez sur le pied de page sous le contenu de la page. Regardez ici http://getbootstrap.com/examples/sticky-footer/

13
Rex CoolCode Charles

utilisez flexbox comme vous pouvez l'utiliser à votre disposition. La solution proposée par bootstrap 4 recherche toujours le contenu de chevauchement dans une présentation réactive, par exemple: elle se brisera dans l'affichage mobile, le truc le plus judicieux est d'utiliser flexbox la démonstration de la solution présentée à ici: ( https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ ) Ainsi, nous n'avons pas à traiter le problème de hauteur fixe qui est une solution obsolète à ce jour ... cette solution fonctionne pour bootstrap 3 et 4 selon votre choix.

<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;
}
10
Christopher Tan

Pour les personnes qui luttent encore et dont la solution proposée ne fonctionne pas 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 que votre style a besoin.

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

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

8
eGlu

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

<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%; }
5
weiy

Cette méthode utilise un balisage minimal. Il suffit de mettre tout votre contenu dans un .wrapper qui a un fond de remplissage et une marge inférieure 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>
3
Vin

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 utilisateurs utilisent un nombre de zillions d'appareils et ont cette mauvaise habitude de les faire tourner quand on s'y attend le moins et ** Pouf ! ** 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 dynamiquement le contenu du contenu de la page padding-bottom pour l'adapter à cette hauteur. Et vous devez exécuter cette fonction minuscule à la page load et resize événements ainsi que sur le pied de page DOMSubtreeModified (juste au cas où votre pied de page est mis à jour dynamiquement de manière asynchrone ou contient des éléments animés qui changent de taille en cas d'interaction avec).

Voici une preuve de concept, en utilisant jQuery v3.0.0 et Bootstrap v4-alpha, mais il n'y a aucune raison pour que cela ne fonctionne pas avec 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($('<p />',{
      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($('<hr />'));
  }
});
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);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

<nav class="navbar navbar-toggleable-md navbar-inverse fixed-top bg-inverse">
      <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <a class="navbar-brand" href="#">Navbar</a>

      <div class="collapse navbar-collapse" id="navbarsExampleDefault">
        <ul class="navbar-nav mr-auto">
          <li class="nav-item active">
            <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link disabled" href="#">Disabled</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="http://example.com" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
            <div class="dropdown-menu" aria-labelledby="dropdown01">
              <a class="dropdown-item" href="#">Action</a>
              <a class="dropdown-item" href="#">Another action</a>
              <a class="dropdown-item" href="#">Something else here</a>
            </div>
          </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
          <input class="form-control mr-sm-2" type="text" placeholder="Search">
          <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
        </form>
      </div>
    </nav>

    <div class="container">

      <div class="starter-template">
        <h1>Feed that footer - not a game (yet!)</h1>
        <p class="lead">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).</p><button class="btn btn-warning" onclick="window.addMoreContentToFooter()">Feed that footer</button><hr /><blockquote class="lead"><strong>Note:</strong> I used jQuery <code>v3.1.1-slim</code> and Bootstrap <code>v4-alpha-6</code> but there is no reason why it shouldn't work with lower versions of each.</blockquote>
      </div>
    </div>
<footer>I am a footer with dynamic content.
  <hr />

Au départ, j'ai posté cette solution ici mais je me suis rendu compte que cela pourrait aider plus de gens si posté sous cette question.

Remarque: J'ai volontairement enveloppé la $([selector]).accomodateFooter() en tant que plug-in jQuery, afin qu'elle puisse être exécutée sur n'importe quel élément DOM, comme dans la plupart des mises en page. Le bottom-padding de $('body') n'a pas besoin d'être ajusté, mais un élément de wrapper de page avec position:relative (généralement le parent immédiat du footer).

2
Andrei Gheorghiu

Pour Bootstrap:

<div class="navbar-fixed-bottom row-fluid">
  <div class="navbar-inner">
    <div class="container">
      Text
    </div>
  </div>
</div>
2
shilovk

Ou ca

<footer class="navbar navbar-default navbar-fixed-bottom">
    <p class="text-muted" align="center">This is a footer</p>
</footer>
2
Annjawn

Aucune de ces solutions ne fonctionnait parfaitement pour moi car j’utilisais la classe inverse de barre de navigation dans mon pied de page. Mais j'ai obtenu une solution qui fonctionne sans Javascript. Utilisé Chrome pour faciliter la formation de requêtes multimédia. La hauteur du pied de page change à mesure que l'écran se redimensionne. Vous devez donc faire attention à cela et l'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 garder au bas. Aussi largeur: 100%. Voici mon CSS avec les requêtes de médias. Vous devrez ajuster min-width et max-width et ajouter 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; 
    }
}
1
Brian Edwards