web-dev-qa-db-fra.com

Bas de page en bas de la page, Twitter bootstrap

Je connais généralement bien la technique de vidage d'un pied de page à l'aide de CSS.

Mais j’ai un peu de mal à faire fonctionner cette approche pour le bootstrap sur Twitter, probablement en raison du fait que le bootstrap sur Twitter est de nature réactive. Utilisation de Twitter bootstrap Je ne parviens pas à faire glisser le pied de page au bas de la page en utilisant l'approche décrite dans l'article de blog ci-dessus.

csstwitter-bootstrapfooter
268
Calvin Cheng

Trouvé les extraits ici fonctionne vraiment 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 Didacticiel (n'est plus disponible; RIP )

299
Chuan Yeong

Ceci est maintenant inclus avec Bootstrap 2.2.1.

Bootstrap 3.x

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

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

Bootstrap 4.x

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

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

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

427
sanon

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

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

71
HenryW

Voici comment implémenter ceci depuis la page officielle:

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

Je viens de le tester maintenant et ça marche 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;
    }
}
33
Leniel Maccaferri

Pour Sticky Footer nous utilisons deux DIV's dans le code HTML pour obtenir un effet de base sticky footer. É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;
}
31
sandeep

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;
}
26
user

Eh bien, j'ai trouvé un mélange de navbar-inner et de 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>

Cela semble bon et fonctionne pour moi

enter image description here

Voir exemple dans Fiddle

18
Maxim Shoustin

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 ça:

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

Et il se met en bas sur toute la largeur.

Edit: Ceci va mettre le pied de page sur toujours visible, c'est quelque chose que vous devez prendre en compte.

11
sp_omer

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

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

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

Nous devons faire cela parce que pousser la body pour adapter la barre de navigation finit par pousser le pied de page un peu plus loin (70 pixels plus loin) au-delà de la fenêtre d'affichage pour obtenir une barre de défilement. Nous obtenons de meilleurs résultats en poussant le .container-fluid div à la place.

Ensuite, nous devons supprimer la classe .wrapper en dehors de votre .container-fluid div et envelopper votre #main div avec elle, comme suit:

<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 en dehors du .wrapper div, alors supprimez-le du `.wrapper div et placez-le à l'extérieur, comme suit:

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

Une fois que tout est terminé, rapprochez votre pied de page de votre classe .wrapper en utilisant une marge négative, comme suit:

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

Et cela devrait fonctionner, bien que vous deviez probablement modifier quelques autres choses pour que cela fonctionne lorsque l'écran est redimensionné, comme réinitialiser la hauteur de la classe .wrapper, comme ceci:

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

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

  • Eviter le "saut" sur le chargement de la page en marquant d'abord invisible et en rendant visible en javascript
  • Traiter avec le navigateur se redimensionne avec élégance
  • De plus, la sauvegarde du pied de page est sauvegardée si le navigateur devient plus petit et si le pied de page devient plus grand que la page.
  • Hauteur fonction tweaks

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;
});
9
Cory

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>
9
Régis B.

Dans le dernière version of bootstrap 4-alpha, j'ai pu le faire avec 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 placementici . 

7
MedAli

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

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

ajouter du corps 

  { padding-bottom: 70px; }
4
Admin File3

pour gérer les dispositions de contrainte de largeur, utilisez ce qui suit pour éviter les angles arrondis et pour que la barre de navigation soit alignée 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>

alors vous pouvez utiliser css pour remplacer les classes d'amorçage afin d'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;
    }
3
1-14x0r

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();
    });
});
2
DucCuong

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;
}
2
Dušan Maďar

La technique la plus simple consiste probablement à utiliser Bootstrap navbar-static-bottom conjointement avec la définition de la div du conteneur principal avec height: 100vh (nouveau CSS3 pourcentage du port de vue ). Cela videra 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>
2
Pan Wangperawong

D'après exemple de Bootstrap 4. , au cas où vous perdriez votre santé mentale, voici comment cela fonctionne:

  • Tous les parents de la div du pied de page doivent avoir la classe height: 100% (h-100)
  • Le parent direct du pied de page doit avoir display: flex (d-flex class)
  • Le pied de page doit avoir margin-top: auto (mt-auto class)

Le problème est que, dans les frameworks front-end modernes, nous avons souvent des wrappers supplémentaires autour de ces éléments.

Par exemple, dans mon cas, avec Angular, j'ai composé la vue à partir d'une racine d'application, d'un composant d'application principal et d'un composant de pied de page distincts, qui ont tous ajouté leur élément personnalisé au DOM.

Donc, pour que cela fonctionne, j'ai dû ajouter des classes à ces éléments d'emballage: un h-100 supplémentaire, déplaçant le d-flex d'un niveau vers le bas, et le mt-auto d'un niveau vers le haut du pied de page (Donc en fait, ce n'est plus sur la classe de pied de page, mais sur mon élément personnalisé <app-footer>).

1
MrValueType

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;
}
1
Ricardo

Utilisez les utilitaires flex intégrés à Bootstrap 4! Voici ce que je propose en utilisant principalement les utilitaires Bootstrap 4.

<div class="d-flex flex-column" style="min-height: 100vh">
  <header></header>
  <div class="container flex-grow-1">
    <div>Some Content</div>
  </div>
  <footer></footer>
</div>
  • .d-flex pour faire de la division principale un conteneur flexible
  • .flex-column sur le div principal pour organiser vos articles flex dans une colonne
  • min-height: 100vh à la div principale, avec un attribut de style ou dans votre css, pour remplir la fenêtre de visualisation verticalement
  • .flex-grow-1 sur l'élément conteneur pour que le conteneur de contenu principal occupe tout l'espace restant dans la hauteur de la fenêtre.
1
EGhost57
#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 d'enveloppement.

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

Rester 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 à la body.

0
obfk

Voici comment bootstrap le fait:

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

Il suffit d’utiliser le code source de la page et vous devriez pouvoir le voir. Ne pas oublier le <div id="wrap"> en haut.

0
Bren

Voici un exemple utilisant 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

0
Victor

Vous trouverez ici l'approche dans HAML ( http://haml.info ) avec barre de navigation en haut et 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
0
Hannes

Utilisez la classe ci-dessous pour la placer sur la dernière ligne de la page et la placer au centre de celle-ci . 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

0
Remember Why You Started

Voici une solution pour la dernière version de Bootstrap (4.3 au moment de la rédaction) utilisant Flexbox.

HTML:

<div class="wrapper">
  <div class="content">
    <p>Content goes here</p>
  </div>
</div>
<footer class="footer"></footer>

CSS:

html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

.wrapper {
  flex-grow: 1;
}

Et un exemple de code: https://codepen.io/tillytoby/pen/QPdomR

0
Tom T

une autre solution possible, en utilisant simplement des requêtes de médias

@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;
    }
}
0
GeorgeWL

Il semble que height:100% 'chaîne' soit cassée à div#main. Essayez d’ajouter height:100% et cela vous rapprocherait de votre objectif.

0
brains911