Flushing pied de page en bas de la page, twitter bootstrap

Question

Flushing pied de page en bas de la page, twitter bootstrap

Je suis généralement familier avec la technique de vidange d'un pied de page en utilisant css et cette approche suivante .

Mais j'ai du mal à faire fonctionner cette approche pour Twitter bootstrap, probablement en raison du fait que Twitter bootstrap est de nature réactive. En utilisant Twitter bootstrap Je ne suis pas en mesure d'obtenir le pied de page pour rincer au bas de la page en utilisant l'approche décrite dans le billet de blog ci-dessus.

265

css footer twitter-bootstrap

demandé sur gldnspud 2012-04-11 07:31:04

26 réponses

score 289 · Answer 1

Trouvé les extraits ici fonctionne très bien pour bootstrap

Html:

<div id="wrap">
  <div id="main" class="container clear-top">
    <p>Your content here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

#wrap {
  min-height: 100%;
}

#main {
  overflow:auto;
  padding-bottom:150px; /* this needs to be bigger than footer height*/
}

.footer {
  position: relative;
  margin-top: -150px; /* negative value of footer height */
  height: 150px;
  clear:both;
  padding-top:20px;
}

Source: Démo et Tutoriel (n'est plus disponible; RIP)

score 415 · Answer 2

Ceci est maintenant inclus avec Bootstrap 2.2.1.

Utilisez le composant navbar et ajoutez .navbar-fixed-bottom classe:

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

N'oubliez pas d'ajouter body { padding-bottom: 70px; } ou autrement le contenu de la page peut être couvert.

Docs: http://getbootstrap.com/components/#navbar-fixed-bottom

score 67 · Answer 3

Un exemple de travail pour Twitter bootstrap not sticky FOOTER

<script>
$(document).ready(function() {

    var docHeight = $(window).height();
    var footerHeight = $('#footer').height();
    var footerTop = $('#footer').position().top + footerHeight;

    if (footerTop < docHeight)
        $('#footer').css('margin-top', 10+ (docHeight - footerTop) + 'px');
});
</script>

Vous avez besoin d'au moins un élément avec un `#footer`

Quand vous ne voulez pas la barre de défilement si le contenu correspond à l'écran, changez simplement la valeur de 10 à 0
La barre de défilement apparaîtra si le contenu ne correspond pas à l'écran.

score 33 · Answer 4

Voici comment implémenter cela à partir de la page officielle:

Http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Je viens de le tester en ce moment et cela fonctionne très bien! :)

HTML

<body>

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

      <!-- Begin page content -->
      <div class="container">
        <div class="page-header">
          <h1>Sticky footer</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.</p>
      </div>

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

    <div id="footer">
      <div class="container">
        <p class="muted credit">Example courtesy <a href="http://martinbean.co.uk">Martin Bean</a> and <a href="http://ryanfait.com/sticky-footer/">Ryan Fait</a>.</p>
      </div>
    </div>
</body>

Le code CSS pertinent est le suivant:

/* 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 !important;
    height: 100%;
    /* Negative indent footer by it's height */
    margin: 0 auto -30px;
}

/* Set the fixed height of the footer here */
#push,
#footer {
    height: 30px;
}

#footer {
    background-color: #f5f5f5;
}

/* Lastly, apply responsive CSS fixes as necessary */
@media (max-width: 767px) {
    #footer {
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
    }
}

score 30 · Answer 5

Pour Sticky Footer, nous utilisons deux DIV's dans le code HTML de base sticky footer effet. Écrivez comme ceci:

HTML

<div class="container"></div>

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

CSS

body,html {
    height:100%;
}
.container {
    min-height:100%;
}
.footer {
    height:40px;
    margin-top:-40px;
}

score 24 · Answer 6

Exemple officiel beaucoup plus simple: http://getbootstrap.com/examples/sticky-footer-navbar/

html {
  position: relative;
  min-height: 100%;
}
body {
  margin-bottom: 60px;
}
.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background-color: #f5f5f5;
}

score 17 · Answer 7

Eh Bien j'ai trouvé mélange de navbar-inner et navbar-fixed-bottom

<div id="footer">
 <div class="navbar navbar-inner  navbar-fixed-bottom">
    <p class="muted credit"><center>ver 1.0.1</center></p>
 </div>
</div>

, Il semble bon et fonctionne pour moi

entrez la description de l'image ici

Voir l'exemple de l'Violon

score 11 · Answer 8

Cela a fonctionné pour moi parfaitement.

Ajoutez cette classe navbar-fixed-bottom à votre pied de page.

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

Je l'ai utilisé comme ceci:

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

Et il met en bas sur toute la largeur.

Edit: cela mettra le pied de page à toujours visible, c'est quelque chose que vous devez prendre en considération.

score 10 · Answer 9

Vous devez envelopper votre .container-fluid div pour que votre pied de page collant fonctionne, il vous manque également des propriétés sur votre classe .wrapper. Essayez ceci:

Supprimez le padding-top:70px de votre balise body et incluez-le dans votre .container-fluid à la place, comme ceci:

.wrapper > .container-fluid {
    padding-top: 70px;
}

Nous devons le faire parce que pousser le body vers le bas pour accueillir la barre de navigation finit par pousser le pied de page un peu plus loin (70px plus loin) au-delà de la fenêtre afin que nous obtenions une barre de défilement. Nous obtenons de meilleurs résultats en poussant le .container-fluid div plutôt.

Ensuite, nous devons supprimer la .wrapper classe à l'extérieur de votre .container-fluid div et enveloppez votre #main div avec elle, comme ceci:

<div class="wrapper">
    <div id="main" class="container-fluid">
        <div class="row-fluid">...</div>
        <div class="push"></div>
    </div>
</div>

Votre pied de page doit bien sûr être hors de la .wrapper div alors retirez - le de la `.wrapper div et placez-le à l'extérieur, comme ceci:

<div class="wrapper">
    ....
</div>
<footer class="container-fluid">
    ....
</footer><!--END .row-fluid-->

Après tout cela, rapprochez correctement votre pied de page de votre classe .wrapper en utilisant une marge négative, comme ceci:

.wrapper {
    min-height: 100%;
    height: auto !important; /* ie7 fix */
    height: 100%;
    margin: 0 auto -43px;
}

Et cela devrait fonctionner, bien que vous deviez probablement en modifier quelques-uns d'autres choses pour le faire fonctionner lorsque l'écran est redimensionné, comme la réinitialisation de la hauteur sur la classe .wrapper, comme ceci:

@media (max-width:480px) {
   .wrapper {
      height:auto;
   }
}

score 9 · Answer 10

C'est la bonne façon de le faire avec Twitter Bootstrap et la nouvelle classe navbar-fixed-bottom: (vous n'avez aucune idée du temps que j'ai passé à chercher cela)

CSS:

html {
  position: relative;
  min-height: 100%;
}
#content {
  padding-bottom: 50px;
}
#footer .navbar{
  position: absolute;
}

HTML:

<html>
  <body>
    <div id="content">...</div>
    <div id="footer">
      <div class="navbar navbar-fixed-bottom">
        <div class="navbar-inner">
          <div class="container">
            <ul class="nav">
              <li><a href="#">Menu 1</a></li>
              <li><a href="#">Menu 2</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

score 8 · Answer 11

La réponse de HenryW est bonne, même si j'avais besoin de quelques réglages pour le faire fonctionner comme je le voulais. En particulier, ce qui suit gère également:

éviter le "jumpiness" lors du chargement de la page en marquant d'abord invisible et en définissant visible en javascript
traiter avec le navigateur redimensionne gracieusement
réglage supplémentaire du pied de page sauvegardez la page si le navigateur devient plus petit et que le pied de page devient plus grand que la page
réglages de la fonction de hauteur

Voici ce qui a fonctionné pour moi avec ces réglages:

HTML:

<div id="footer" class="invisible">My sweet footer</div>

CSS:

#footer {
    padding-bottom: 30px;
}

JavaScript:

function setFooterStyle() {
    var docHeight = $(window).height();
    var footerHeight = $('#footer').outerHeight();
    var footerTop = $('#footer').position().top + footerHeight;
    if (footerTop < docHeight) {
        $('#footer').css('margin-top', (docHeight - footerTop) + 'px');
    } else {
        $('#footer').css('margin-top', '');
    }
    $('#footer').removeClass('invisible');
}
$(document).ready(function() {
    setFooterStyle();
    window.onresize = setFooterStyle;
});

score 7 · Answer 12

Dans la dernière version de bootstrap 4-alpha , j'ai pu le faire en utilisant la classe .fixed-bottom.

<div class="fixed-bottom"></div>

Voici comment je l'utilise avec le pied de page:

<footer class="footer fixed-bottom container">
        <hr>
        <p>&copy; 2017 Company, Inc.</p>
</footer>

Vous trouverez plus d'informations dans la documentation placement ici.

score 4 · Answer 13

Utilisez le composant navbar et ajoutez .navbar-fixe-classe inférieure:

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

Ajouter le corps

  { padding-bottom: 70px; }

score 3 · Answer 14

Pour gérer les mises en page de contraintes de largeur, utilisez ce qui suit pour ne pas obtenir de coins arrondis et pour que votre barre de navigation soit affleurante sur les côtés de l'application

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="width-constraint clearfix">
            <p class="pull-left muted credit">YourApp v1.0.0</p>

            <p class="pull-right muted credit">©2013 • CONFIDENTIAL ALL RIGHTS RESERVED</p>
        </div>
    </div>
</div>

Ensuite, vous pouvez utiliser css pour remplacer les classes bootstrap pour ajuster la hauteur, la police et la couleur

    .navbar-fixed-bottom {
      font-size: 12px;
      line-height: 18px;
    }
    .navbar-fixed-bottom .navbar-inner {
        min-height: 22px;
    }
    .navbar-fixed-bottom .p {
        margin: 2px 0 2px;
    }

score 2 · Answer 15

Vous pouvez utiliser jQuery pour gérer ceci:

$(function() {
    /**
     * Read the size of the window and reposition the footer at the bottom.
     */
    var stickyFooter = function(){
        var pageHeight = $('html').height();
        var windowHeight = $(window).height();
        var footerHeight = $('footer').outerHeight();

        // A footer with 'fixed-bottom' has the CSS attribute "position: absolute",
        // and thus is outside of its container and counted in $('html').height().
        var totalHeight = $('footer').hasClass('fixed-bottom') ?
            pageHeight + footerHeight : pageHeight;

        // If the window is larger than the content, fix the footer at the bottom.
        if (windowHeight >= totalHeight) {
            return $('footer').addClass('fixed-bottom');
        } else {
            // If the page content is larger than the window, the footer must move.
            return $('footer').removeClass('fixed-bottom');
        }
    };

    // Call when this script is first loaded.
    window.onload = stickyFooter;

    // Call again when the window is resized.
    $(window).resize(function() {
        stickyFooter();
    });
});

score 2 · Answer 16

La technique la plus simple consiste probablement à utiliser Bootstrap navbar-static-bottom en conjonction avec la définition du conteneur principal div avec height: 100vh (nouveau CSS3 Pourcentage de port de vue). Cela va rincer le pied de page vers le bas.

<main class="container" style="height: 100vh;">
  some content
</main>      
<footer class="navbar navbar-default navbar-static-bottom">
  <div class="container">
  <p class="navbar-text navbar-left">&copy; Footer4U</p>
  </div>
</footer>

score 2 · Answer 17

Testé avec Bootstrap 3.6.6.

HTML

<div class="container footer navbar-fixed-bottom">
  <footer>
    <!-- your footer content here -->
  </footer>
</div>

CSS

.footer {
  bottom: 0;
  position: absolute;
}

score 1 · Answer 18

#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
width: 100%;
/*Negative indent footer by its height*/
margin: 0 auto -60px;
position: fixed;
left: 0;
top: 0;
}

La hauteur du pied de page correspond à la taille du retrait inférieur de l'élément wrap.

.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
height: 60px;
}

score 1 · Answer 19

Le seul qui a fonctionné pour moi!:

html {
  position: relative;
  min-height: 100%;
  padding-bottom:90px;
}
body {
  margin-bottom: 90px;
}
footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 90px;
}

score 0 · Answer 20

Il semble que la chaîne height:100% soit brisée à div#main. Essayez d'y ajouter height:100% et cela peut vous rapprocher de votre objectif.

score 0 · Answer 21

Vous trouverez ici L'approche dans HAML ( http://haml.info ) avec la barre de navigation en haut et le pied de page en bas de la page:

%body
  #main{:role => "main"}
    %header.navbar.navbar-fixed-top
      %nav.navbar-inner
        .container
          /HEADER
      .container
        /BODY
    %footer.navbar.navbar-fixed-bottom
      .container
        .row
          /FOOTER

score 0 · Answer 22

Reste simple.

footer {
  bottom: 0;
  position: absolute;
}

Vous devrez peut-être également décaler la hauteur du pied de page en ajoutant un margin-bottom équivalent à la hauteur du pied de page au body.

score 0 · Answer 23

Voici un exemple d'utilisation de css3:

CSS:

html, body {
    height: 100%;
    margin: 0;
}
#wrap {
    padding: 10px;
    min-height: -webkit-calc(100% - 100px);     /* Chrome */
    min-height: -moz-calc(100% - 100px);     /* Firefox */
    min-height: calc(100% - 100px);     /* native */
}
.footer {
    position: relative;
    clear:both;
}

HTML:

<div id="wrap">
    <div class="container clear-top">
       body content....
    </div>
</div>
<footer class="footer">
    footer content....
</footer>

Violon

score 0 · Answer 24

Voici comment bootstrap le fait:

Http://getbootstrap.com/2.3.2/examples/sticky-footer.html

Il suffit d'utiliser la source de la page et vous devriez être en mesure de voir. N'oubliez pas le <div id="wrap"> et le haut.

score 0 · Answer 25

Une autre solution possible, simplement en utilisant des requêtes multimédia

@media screen and (min-width:1px) and (max-width:767px) {
    .footer {
    }
}
/* no style for smaller or else it goes weird.*/
@media screen and (min-width:768px) and (max-width:991px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:992px) and (max-width:1199px) {
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}
@media screen and (min-width:1120px){
    .footer{
        bottom: 0;
        width: 100%;
        position: absolute;
    }
}

score 0 · Answer 26

Utiliser le dessous de la classe de pousser à la dernière ligne de la page, et de rendre de centre. Si vous utilisez la page Ruby on rails HAML, vous pouvez utiliser le code ci-dessous. %footer.card.text-center

Pls ne pas oublier d'utiliser twitter bootstrapp

Las etiquetas más populares

Flushing pied de page en bas de la page, twitter bootstrap

26 réponses

Vous avez besoin d'au moins un élément avec un #footer

Vous avez besoin d'au moins un élément avec un `#footer`