Par

Ou une brève histoire des sticky footers...

Un sticky footer ("pied de page collant") est un pied de page qui reste "collé" au bas de la fenêtre du navigateur — mais pas toujours : s'il y a assez de contenu pour remplir la fenêtre, le footer suit le contenu et n'apparaît pas, si au contraire il n'y a pas assez de contenu, le footer sera collé en bas de page.

Voici 5 façons possibles de créer un sticky footer, des plus anciennes aux plus récentes :

Marges négatives sur les wrappers

Autrefois on utilisait un élément qui enveloppait tout le contenu à l'exception du pied de page. Cet élément "wrapper" avait une marge négative égale à la hauteur du pied de page.

HTML

<body>
  <div class="wrapper">

      content

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

et

CSS

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;

  /* Égal à la hauteur du footer */
  /* Tient compte aussi d'une possible margin-bottom du dernier enfant */
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

See the Pen Sticky Footer with Negative Margin 1 by Chris Coyier (@chriscoyier) on CodePen.

Pour y parvenir on a utilisé un élément supplémentaire (le .push) pour s'assurer que la marge négative ne tire pas le footer vers le haut ce qui aurait recouvert une partie du contenu.

Marge supérieure négative sur le footer

Cette autre technique ne faisait pas appel à un élément push mais à un élément enveloppant supplémentaire dans lequel on appliquait un padding inférieur correspondant. Là encore, pour éviter que la marge négative ne fasse passer le footer par-dessus un contenu.

HTML

<body>
  <div class="content">
    <div class="content-inside">
      content
    </div>
  </div>
  <footer class="footer"></footer>
</body>

et

CSS

html, body {
  height: 100%;
  margin: 0;
}
.content {
  min-height: 100%;
}
.content-inside {
  padding: 20px;
  padding-bottom: 50px;
}
.footer {
  height: 50px;
  margin-top: -50px;
}

See the Pen Sticky Footer with Negative Margins 2 by Chris Coyier (@chriscoyier) on CodePen.

Le point commun à ces deux techniques est qu'elles requièrent toutes deux des éléments HTML supplémentaires qui n'ont d'autre utilité que positionnelle.

Hauteur du wrapper calculée

Une façon d'éviter le recours à des éléments HTML inutiles consiste à ajuster la hauteur de l'élément enveloppant à l'aide de CSS calc(). Il n'y a plus de tuilage, ce sont simplement deux éléments empilés l'un sur l'autre ayant une hauteur totale de 100%.

HTML

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

et

CSS

.content {
  min-height: calc(100vh - 70px);
}
.footer {
  height: 50px;
}

See the Pen Sticky Footer with calc(); by Chris Coyier (@chriscoyier) on CodePen.

Remarquez les 70px dans la formule de calc(), comparés aux 50px de la taille fixe du footer. On suppose en fait que le dernier item du contenu aura une marge inférieure de 20px. C'est donc la somme de cette marge et de la hauteur du footer qu'il convient de soustraire de la hauteur du viewport. Et remarquez aussi que nous utilisons les unités viewport ici (vh) afin d'éviter d'avoir à régler la hauteur de body à 100% avant de pouvoir régler celle du wrapper à 100%.

Il y a Flexbox

Le grand problème des trois techniques précédentes est qu'elles requièrent un footer de hauteur fixe. Dans le design web, les hauteurs fixes sont en général un mauvais choix, le contenu peut changer, les choses sont flexibles et donc les hauteurs fixes devraient être évitées. La solution Flexbox non seulement ne nécessite pas d'élément supplémentaire mais permet d'avoir une hauteur de footer variable.

HTML

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

et

CSS

html, body {
  height: 100%;
}
body {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex-shrink: 0;
}

See the Pen Sticky Footer with Flexbox by Chris Coyier (@chriscoyier) on CodePen.

On pourrait même ajouter un header ou d'autres éléments. Le "truc" avec Flebox c'est :

  • soit flex: 1 sur l'élément enfant qu'on veut agrandir pour qu'il remplisse l'espace (ici, le contenu),
  • soit margin-top: auto pour pousser l'élément enfant aussi loin que possible de son voisin (ou toute autre marge selon la direction souhaitée).

N'oubliez pas que nous avons un guide complet sur Flexbox ici même pour plus d'infos.

Il y a Grid

CSS Grid Layout est plus récent que Flexbox mais largement supporté aujourd'hui. On peut l'utiliser facilement pour créer un sticky footer.

HTML

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

et

CSS

html {
  height: 100%;
}
body {
  min-height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

See the Pen Sticky Footer with Grid by Chris Coyier (@chriscoyier) on CodePen.

N'oubliez pas que nous avons un guide complet sur Grid Layout ici même pour plus d'infos.

(publicité)


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Tous les articles sur les bases de CSS parus dans la Cascade.

Les meilleurs outils Flexbox et CSS Grid recensés par la Cascade.


original paru le 16 février 2018 dans CSS-Tricks
Traduit avec l’aimable autorisation de CSS-Tricks et de l’auteur.
Copyright CSS-Tricks © 2018
.

Sur l’auteur : est designer, blogger, conférencier. Créateur de CSS-Tricks, de CodePen, animateur du Podcast Shop Talk, il est l'auteur avec Jeff Starr de "Digging into WordPress". Vous pouvez le retrouver sur Twitter.

NdT : CSS-Tricks est un site ressource d'une richesse exceptionnelle, axé sur CSS et le web design en général. Vous pouvez suivre son actualité sur Twitter, Facebook, YouTube, GitHub. Mélange d'articles, de vidéos, de forums, de ressources diverses (jetez un coup d'oeil à son "Almanac" ), il est très populaire sur le web anglophone.

CodePen est un site où vous pouvez tester votre code, faire des maquettes, proposer vos dernières créations et recueillir les observations de vos pairs. C'est aussi une source d'inspiration pour vos propres designs.