Pied de page flushing au bas de la page, bootstrap twitter

306

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

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

css twitter-bootstrap footer Calvin Cheng
la source
Avant de tester toutes les réponses ci-dessous, gardez à l'esprit que l'OP veut le faire fonctionner avec twitter bootstrap.Comme ce n'est pas un must, twitter bootstrap fonctionne avec Jquery, ce qui signifie qu'il est activé par Javascript.Pour cette raison, testez ma réponse: stackoverflow.com / questions / 10099422 /…
HenryW
4
Exemple officiel: getbootstrap.com/examples/sticky-footer-navbar/…
utilisateur
1
Le lien est rompu! Quelqu'un peut-il corriger le lien d'exemple officiel?
PassionInfinite
1
@PassionInfinite getbootstrap.com/docs/4.0/examples/sticky-footer-navbar il pourrait devenir une version plus ancienne à l'avenir à cause de 4.0 je suppose.
Ammad Khalid

Réponses:

324

J'ai trouvé que les extraits ici fonctionnent très bien pour le 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;
}
Chuan Yeong
la source
C'est la meilleure solution que j'ai essayée jusqu'à présent. Accepté comme réponse.
Calvin Cheng
Salut, j'ai implémenté cette méthode, cela fonctionne très bien mais maintenant j'ai des problèmes avec l'affichage de la page sur l'iphone (la page est zoomée). Des idées quel est le problème? Voici quelques détails: stackoverflow.com/questions/18621090/…
pupadupa
94
Juste au cas où vous auriez lu cette réponse et que vous ne l'avez pas fait défiler, il vaut la peine de regarder les autres réponses
MattyW
4
en particulier celui-ci: stackoverflow.com/questions/10099422/…
HenryW
1
C'est la meilleure méthode que j'ai trouvée pour Bootstrap. Pour la réactivité de l'appareil, n'oubliez pas d'utiliser les requêtes multimédias pour mettre à jour les hauteurs #main et .footer pour différentes tailles d'écran
SyntaxGoonoo
467

Ceci est maintenant inclus avec Bootstrap 2.2.1.

Bootstrap 3.x

Utilisez le composant navbar et ajoutez la .navbar-fixed-bottomclasse:

<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; }ou sinon le contenu de la page peut être couvert.

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

sanon
la source
35
@ChuanYeong Malheureusement, il n'y en a pas navbar-static-bottom.
Lawrence Woodman
25
@MikeCurry, il n'a pas posé de questions sur un pied de page fixe, mais celui qui "remplit" l'espace vide, si votre page n'a pas assez de contenu pour que le pied de page reste en bas. Si votre pied de page est uniquement informatif, un pied fixe ne prend que de l'espace précieux.
rdlu
22
Ce n'est pas un pied de page collant, car il est utilisé en position: fixe; ce qui n'est pas vrai
Furkat U.
9
Oui, cette solution ne vire que vers le bas de la fenêtre et non vers le bas de la page. c'est-à-dire que le pied de page est toujours visible.
rism
3
J'ai dû dévaloriser la réponse car cela donne de la confusion. Le PO ne veut pas d'un pied de page collant.
HenryW
77

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>

Version qui est toujours mise à jour au cas où l'utilisateur ouvre devtools ou redimensionne la fenêtre.

<script>
    $(document).ready(function() {
        setInterval(function() {
            var docHeight = $(window).height();
            var footerHeight = $('#footer').height();
            var footerTop = $('#footer').position().top + footerHeight;
            var marginTop = (docHeight - footerTop + 10);

            if (footerTop < docHeight)
                $('#footer').css('margin-top', marginTop + 'px'); // padding of 30 on footer
            else
                $('#footer').css('margin-top', '0px');
            // console.log("docheight: " + docHeight + "\n" + "footerheight: " + footerHeight + "\n" + "footertop: " + footerTop + "\n" + "new docheight: " + $(window).height() + "\n" + "margintop: " + marginTop);
        }, 250);
    });
</script>

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

Si vous ne voulez pas que la barre de défilement soit adaptée à l'écran, modifiez simplement la valeur de 10 à 0.
La barre de défilement s'affichera si le contenu ne convient pas à l'écran.

HenryW
la source
9
Ouais, je suis allé avec celui-ci aussi. CSS peut être tellement stupide parfois. Non pas que ce soit impossible, mais les solutions à usage général peuvent être difficiles à trouver, et la correction de choses ennuyeuses comme celle-ci dans nos mises en page ne devrait pas prendre le temps d'échanger des piles, des révisions multiples, des tests croisés et une éventuelle reddition à un simple JS tour. Ouais, je me sens un peu sale, mais au moins ça marche.
meecect
3
chaque solution que j'ai étudiée est fausse. C'est le SEUL qui fait ce qu'il est censé faire - coller le pied de page au bas de la page, sans masquer aucun contenu si le navigateur est redimensionné.
Dave
13
cela n'a pas fonctionné aussi bien que prévu pour moi, encore une des meilleures réponses, j'ai résolu mon problème en le remplaçant $('#footer').height();par$('#footer').outerHeight();
DarkMukke
3
Très bonne réponse! J'ai eu quelques adaptations que je pense améliorer ici: stackoverflow.com/a/36385654/8207
Cory
6
La meilleure réponse que j'ai trouvée. Si vous voulez que cela fonctionne après le redimensionnement de la fenêtre, mettez simplement le code principal de la réponse à l'intérieur $(window).resize(function() {//main code goes here});et appelez-le $(window).resize();pour le définir lors du chargement de la page.
Szymon Sadło
36

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 ça MARCHE 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;
    }
}
Leniel Maccaferri
la source
7
Merci d'avoir posté cela, c'était certainement la meilleure solution (sans parler de la seule qui a fonctionné) pour mon projet particulier, et bien sûr, c'est bien que ce soit directement à partir du projet lui-même.
Cory W.
1
Je ne sais pas quel était l'accord, mais je n'ai pas pu le faire fonctionner sans ajouter un défilement aux pages. J'ai fini par changer le CSS .wrapper donc la hauteur minimale était "calc (100% - 120px)" où le 120px est la hauteur de mon pied de page et j'ai supprimé le <div id = "push"> </div> du html car il ne semblait rien faire à part ajouter de la hauteur à la page dont je n'avais pas besoin.
jammyman34
36

Pour Sticky Footer, nous en utilisons deux DIV'sdans le HTML pour un effet basique de bas de page . É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;
}
sandeep
la source
7
Il a dit qu'il utilisait Twitter Bootstrap. Quelle serait la façon la plus simple d'intégrer cela dans Bootstrap sans réécrire complètement le code HTML?
Cody Gray
1
Si OP veut obtenir l'effet Sticky Footer, il doit changer son MarkUp
sandeep
Je vous remercie! Cela a été la seule méthode qui a réellement fonctionné pour moi dans un site ASP.NET MVC5 qui utilise Bootstrap. +1
Yann Duran
30

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;
}
utilisateur
la source
19

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

entrez la description de l'image ici

Voir l'exemple dans Fiddle

Maxim Shoustin
la source
2
solution la plus simple et la plus élégante. Méfiez-vous de la fabrication à domicile de votre propre code CSS car il ne sera pas rétrocompatible avec le bootstrap
1-14x0r
J'ai utilisé cela et j'ai eu un problème sur un vieil androïde (froy peut-être?) Avec des pages plus courtes que l'écran. Sinon, cela a bien fonctionné sur FF, Chrome, IE11, iPhone, nexus 7.
bnieland
Parfait et extrêmement simple!
ramires.cabral
18

Dans la dernière version de bootstrap 4.3, cela peut être fait en utilisant .fixed-bottomclass. 

<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 pouvez trouver plus d'informations dans la documentation de position ici .

Mohamed Ali JAMAOUI
la source
1
Cela fonctionne toujours avec la version officielle 4 déchaînée.
klewis
Notez que l'exemple sur getbootstrap.com/docs/4.1/examples/sticky-footer a un style line-height = 60px sur l'élément de pied de page. Ce n'est pas seulement inutile, cela empêche également le pied de page de fonctionner correctement s'il est le parent d'un ou plusieurs éléments div, ce qui est généralement le cas.
ScottyB
13

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

  • Éviter la "nervosité" lors du chargement de la page en marquant d'abord invisible et en définissant visible en javascript
  • La gestion du navigateur est redimensionnée avec élégance
  • De plus, le bas de page doit être sauvegardé sur 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 ajustements:

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;
});
Cory
la source
11

Cela a parfaitement fonctionné pour moi.

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 se fixe 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.

sp_omer
la source
10

Vous devez envelopper votre .container-fluiddiv pour que votre pied de page collant fonctionne, vous manquez également certaines propriétés de votre .wrapperclasse. Essaye ça:

Supprimez le padding-top:70pxde votre bodybalise et incluez-le à la .container-fluidplace, comme ceci:

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

Nous devons le faire parce que pousser bodyvers le bas pour accueillir la barre de navigation finit par pousser le pied de page un peu plus loin (70 pixels plus loin) après la fenêtre, nous obtenons donc une barre de défilement. Nous obtenons de meilleurs résultats en poussant le .container-fluiddiv à la place.

Ensuite, nous devons supprimer la .wrapperclasse en dehors de votre .container-fluiddiv et envelopper votre #maindiv avec, 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 du .wrapperdiv, alors retirez-le du div `.wrapper et placez-le à l'extérieur, comme ceci:

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

Après que tout soit fait, poussez correctement votre pied de page plus près de votre .wrapperclasse 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, mais vous devrez probablement modifier quelques autres choses pour le faire fonctionner lorsque l'écran est redimensionné, comme réinitialiser la hauteur de la .wrapperclasse, comme ceci:

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

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

Utilisez les utilitaires flex intégrés à Bootstrap 4! Voici ce que j'ai trouvé en utilisant principalement des 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 div principale un conteneur flexible
  • .flex-column sur la div principale pour organiser vos éléments flexibles dans une colonne
  • min-height: 100vh à la div principale, soit avec un attribut de style ou dans votre CSS, pour remplir la fenêtre verticalement
  • .flex-grow-1 sur le conteneur, élément pour que le conteneur de contenu principal occupe tout l'espace restant dans la hauteur de la fenêtre.
EGhost57
la source
Au lieu de min-height: 100vhla min-vh-100classe de Bootstrap, vous pouvez utiliser.
ikonuk
Cette solution a très bien fonctionné, y compris la suggestion min-vh-100 de @ikonuk
TGR
4

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

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

ajouter du corps 

  { padding-bottom: 70px; }
Fichier Admin3
la source
3

pour gérer les dispositions de contrainte de largeur, utilisez ce qui suit pour ne pas obtenir de coins arrondis et pour que votre barre de navigation affleure 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 de 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;
    }
1-14x0r
la source
3

Vous pouvez utiliser jQuery pour gérer cela:

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

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

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

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;
}
Dušan Maďar
la source
1 
#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 enveloppant.

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

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 codepen: https://codepen.io/tillytoby/pen/QPdomR

Tom T
la source
1

Selon l' exemple Bootstrap 4.3 , au cas où vous perdriez votre raison comme je l'ai fait, voici comment cela fonctionne réellement:

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

Le problème est que dans les frameworks frontaux 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 distincte, d'un composant d'application principal et d'un composant de pied de page - qui ont tous ajouté leur élément personnalisé au DOM.

Donc, pour le faire fonctionner, j'ai dû ajouter des classes à ces éléments de wrapper: un supplémentaire h-100, en déplaçant le d-flexniveau inférieur et en déplaçant lemt-auto niveau supérieur du pied de page (donc en fait ce n'est plus sur la classe de pied de page, mais sur ma <app-footer>coutume élément).

MrValueType
la source
Je devais aussi mettre class="h-100"le <html>tag.
Kel Solaar
1

Utilisez ce morceau de code dans le bootstrap ça marche

<div class="navbar fixed-bottom">
<div class="container">
 <p class="muted credit">Footer <a href="http://google.com">Link</a> and <a 
href="http://google.com/">link</a>.</p>
 </div>
 </div>
sanjay
la source
1

Solution Bootstrap v4 +

Voici une solution qui ne nécessite pas de repenser la structure HTML ou toute astuce CSS supplémentaire impliquant un remplissage:

<html style="height:100%;">
  ...
  <body class="d-flex flex-column h-100">
    ...
    <main class="flex-grow-1">...</main>
    <footer>...</footer>
  </body>
  ...
</html>

Notez que cette solution permet des pieds de page avec des hauteurs flexibles, ce qui est particulièrement utile lors de la conception de pages pour plusieurs tailles d'écran avec un habillage de contenu une fois réduit.

Pourquoi cela fonctionne

  • style="height:100%;"fait en <html>sorte que la balise occupe tout l'espace du document.
  • d-flexensembles de classes display:flexà notre <body>balise.
  • flex-columnensembles de classes flex-direction:columnà notre <body>balise. Ses enfants ( <header>, <main>, <footer>et tout autre enfant direct) sont maintenant alignés verticalement.
  • h-100ensembles de classe height:100%à notre<body> balise, ce qui signifie qu'elle couvrira la totalité de l'écran verticalement.
  • flex-grow-1définit la classe flex-grow:1à notre <main>, lui demandant effectivement de remplir tout espace vertical restant, ce qui correspond à la hauteur verticale de 100% que nous avons définie auparavant sur notre <body>balise.

Démonstration de travail ici: https://codepen.io/maxencemaire/pen/VwvyRQB

Voir https://css-tricks.com/snippets/css/a-guide-to-flexbox/ pour plus d'informations sur flexbox.

Kathandrax
la source
h-100la classe ne fonctionne pas correctement, il est préférable de l'utiliser min-vh-100.
ikonuk
@ikonuk Qu'entendez-vous exactement par «ne fonctionne pas correctement»? Veuillez développer.
Kathandrax
Parce que la h-100classe dépend toujours de la hauteur des éléments parents et peut ne pas fonctionner correctement dans certains cas. Puisque nous voulons un pied de page au bas de la fenêtre, il serait judicieux d'utiliser la hauteur de la fenêtre.
ikonuk
Encore une fois, définissez «certains cas». Votre argument sur la dépendance parent s'applique de la même manière min-width. C'est pourquoi la HTMLbalise a un height100% dans le code. L'exemple fonctionne et je ne vois pas pourquoi il ne donnerait pas la prise en charge multi-navigateur pour la heightpropriété CSS , qui est finalement ce que l'extrait Bootstrap traduit.
Kathandrax
Je n'ai pas dit que votre exemple ne fonctionne pas. Tout le monde n'utilise pas le style de la HTMLbalise. Dans mon cas, votre solution n'a pas fonctionné car je ne préfère pas utiliser le style dans la HTMLbalise. Et je ne veux pas que la bodybalise dépend d'un autre parent mais de la fenêtre d'affichage. Vous n'avez pas à mettre style="height:100%;"et h-100en même temps. Mettre min-vh-100au corps fait simplement le travail et moins de code.
ikonuk
0

Il semble que la height:100%«chaîne» soit rompue div#main. Essayez d'y ajouter height:100%et cela pourrait vous rapprocher de votre objectif.

cerveaux911
la source
0

Vous trouverez ici l'approche en HAML ( http://haml.info ) avec navbar en haut et pied de page en bas de 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
Hannes
la source
Pourriez-vous développer un peu votre réponse? Les réponses uniquement codées sont généralement déconseillées.
Qix - MONICA A ÉTÉ MANQUÉ
1
D'accord, que veux-tu savoir?
Hannes
Je n'ai pas besoin de le savoir, mais quelqu'un qui viendra sur ce site plus tard pourrait ne pas savoir exactement pourquoi le code de votre réponse fait ce qu'il fait.
Qix - MONICA A ÉTÉ BRUÉE le
Je devrais probablement le supprimer. J'ai écrit une nouvelle intro. :)
Hannes
0

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 dans le body.

obfk
la source
0

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

Victor
la source
0

une autre solution possible, simplement en utilisant des requêtes multimé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;
    }
}
GeorgeWL
la source