web-dev-qa-db-fra.com

Pied de page au bas de la page ou du contenu, selon la valeur la plus basse

J'ai la structure suivante:

<body>
    <div id="main-wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <footer>
        </footer>
    </div>
</body>

Je charge dynamiquement le contenu dans le <article> en utilisant javascript. Pour cette raison, la hauteur de la <article> bloc peut changer.

Je veux le <footer>bloquez-le en bas de la page lorsqu'il y a beaucoup de contenu, ou en bas de la fenêtre du navigateur lorsqu'il ne reste que quelques lignes de contenu.

Pour le moment, je peux faire l'un ou l'autre ... mais pas les deux.

Alors, est-ce que quelqu'un sait comment je peux faire cela - récupérez le <footer> pour coller au bas de la page/du contenu ou au bas de l'écran, selon la valeur la plus basse.

htmlcsshtml5footer
81
Will

Le pied collant de Ryan Fait est très gentil, mais je trouve que sa structure de base manque *.

Version Flexbox

Si vous avez la chance de pouvoir utiliser flexbox sans prendre en charge les navigateurs plus anciens, les pieds collants deviennent trivialement faciles, et Soutenir un pied de page de taille dynamique.

Le truc pour obtenir que les pieds de page adhèrent au bas avec flexbox est de faire fléchir verticalement d’autres éléments dans le même conteneur. Il suffit d’un élément de wrapper de pleine hauteur avec display: flex et au moins un frère avec une valeur flex supérieure à 0:

CSS:
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}
#main-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  min-height: 100%;
}
article {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
}
header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Si vous ne pouvez pas utiliser flexbox, ma structure de base de choix est la suivante:

<div class="page">
  <div class="page__inner">
    <header class="header">
      <div class="header__inner">
      </div>
    </header>
    <nav class="nav">
      <div class="nav__inner">
      </div>
    </nav>
    <main class="wrapper">
      <div class="wrapper__inner">
        <div class="content">
          <div class="content__inner">
          </div>
        </div>
        <div class="sidebar">
          <div class="sidebar__inner">
          </div>
        </div>
      </div>
    </main>
    <footer class="footer">
      <div class="footer__inner">
      </div>
    </footer>
  </div>
</div>

Ce qui n'est pas si loin de:

<div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
</div>

Le truc pour obtenir le pied de page est de coller le pied de page sur le rembourrage inférieur de son élément conteneur. Ceci nécessite que la hauteur du pied de page soit statique, mais j'ai constaté que les pieds de page avaient généralement une hauteur statique.

HTML:
<div id="main-wrapper">
    ...
    <footer>
    </footer>
</div>
CSS:
#main-wrapper {
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

#main-wrapper {
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
<div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Avec le pied de page ancré à #main-wrapper, vous avez maintenant besoin de #main-wrapper être au moins à la hauteur de la page, à moins que ses enfants ne soient plus longs. Ceci est fait en faisant #main-wrapper avoir un min-height de 100%. Vous devez également vous rappeler que ses parents, html et body doivent également être aussi grands que la page.

CSS:
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Bien sûr, vous devriez remettre en question mon jugement, car ce code force le bas de page à tomber, même s’il n’ya pas de contenu. La dernière astuce consiste à changer le modèle de boîte utilisé par le #main-wrapper de sorte que la min-height de 100% _ inclut le 100px rembourrage.

CSS:
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#main-wrapper {
    box-sizing: border-box;
    min-height: 100%;
    padding: 0 0 100px;
    position: relative;
}

footer {
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  box-sizing: border-box;
  min-height: 100%;
  padding: 0 0 100px;
  position: relative;
}

footer {
  bottom: 0;
  height: 100px;
  left: 0;
  position: absolute;
  width: 100%;
}

header {
  background-color: #F00;
}
nav {
  background-color: #FF0;
}
article {
  background-color: #0F0;
}
footer {
  background-color: #00F;
}
 <div id="main-wrapper">
   <header>
     here be header
   </header>
   <nav>
   </nav>
   <article>
     here be content
   </article>
   <footer>
     here be footer
   </footer>
</div>

Et voilà, un pied de page collant avec votre structure HTML originale. Assurez-vous simplement que le footer de height est égal à #main-wrapper _ padding-bottom, et vous devriez être réglé.

* La raison pour laquelle je trouve à redire à la structure de Fait est parce qu'elle définit le .footer et .header éléments de niveaux hiérarchiques différents en ajoutant un élément inutile .Push élément.

90
zzzzBov

Le pied collant de Ryan Fait est une solution simple que j'ai utilisée plusieurs fois dans le passé.

HTML de base :

<div class="wrapper">
    <div class="header">
        <h1>CSS Sticky Footer</h1>
    </div>
    <div class="content"></div>
    <div class="Push"></div>
</div>
<div class="footer"></div>

[~ # ~] css [~ # ~] :

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
.footer, .Push {
    height: 142px; /* .Push must be the same height as .footer */
}

/*

Sticky Footer by Ryan Fait
http://ryanfait.com/

*/

Traduisez cela pour qu'il soit similaire à ce que vous avez déjà obtenu avec quelque chose dans ce sens:

[~ # ~] html [~ # ~] :

<body>
    <div class="wrapper">
        <header>
        </header>
        <nav>
        </nav>
        <article>
        </article>
        <div class="Push"></div>
    </div>
    <footer>
    </footer>
</body>

CSS:

* {
    margin: 0;
}
html, body {
    height: 100%;
}
.wrapper {
    min-height: 100%;
    height: auto !important;
    height: 100%;
    margin: 0 auto -142px; /* the bottom margin is the negative value of the footer's height */
}
footer, .Push {
    height: 142px; /* .Push must be the same height as .footer */
}

Il suffit de ne pas oublier de mettre à jour le négatif sur la marge de l’emballage pour qu’il corresponde à la hauteur de votre pied de page et de Push div. Bonne chance!

12
Josh Mein

Je cherchais à résoudre ce problème sans ajouter de balisage supplémentaire. J'ai donc utilisé la solution suivante:

article {
  min-height: calc(100vh - 150px); /* deduct the height or margins of any other elements within wrapping container*/
}

footer {
  height: 50px;
}

header {
   height: 50px;
}

nav {
  height: 50px;
}
<body>
  <div id="main-wrapper">
    <header>
    </header>
    <nav>
    </nav>
    <article>
    </article>
    <footer>
    </footer>
  </div>
</body>

Vous devez connaître les hauteurs d'en-tête, de navigation et de pied de page pour pouvoir définir la hauteur minimale de l'article. De ce fait, si l’article ne contient que quelques lignes de contenu, le pied de page restera en bas de la fenêtre du navigateur, sinon il se situera au-dessous de tout le contenu.

Vous pouvez trouver cela et d'autres solutions postées ci-dessus ici: https://css-tricks.com/couple-takes-sticky-footer/

0
Galina E