Qu'est-ce qu'un Sticky Footer ?

Un « sticky footer » est un pied de page qui reste fixé en bas de la fenêtre d'affichage du navigateur, même lorsque le contenu au-dessus de lui n'est pas suffisant pour atteindre le bas de celle-ci.

Voici ci-dessous une illustration mettant en œuvre ce principe. Dans le premier cas, le contenu n'est pas suffisant pour remplir la fenêtre d'affichage du navigateur : le pied de page se colle alors en bas. Dans le second cas, il est suffisant : le pied de page agit normalement en se mettant à la suite du contenu.

Illustration du principe de « sticky footer »

Exemple de structure HTML

Dans la suite de ce tutoriel, nous verrons comment rendre collant le pied de page (matérialisé par l'élément footer) de la structure HTML ci-dessous en utilisant uniquement du CSS.

<body>
  <header>Votre en-tête</header>
  <main>Votre contenu principal</main>
  <footer>Votre pied de page</footer>
</body>

Les différentes techniques CSS

Utiliser Flexbox

La première technique utilise Flexbox qui est très bien supporté par la plupart des navigateurs (> 99.5 % d'utilisateurs supportés).

Les principaux inconvénients de cette méthode sont qu'elle change la disposition de l'élément body en flex et qu'elle nécessite un élément intermédiaire (ici main).

html,
body {
  height: 100%;
}

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

main {
  flex: 1 0 auto;
}

footer {
  flex-shrink: 0;
}

Tableau montrant le support de Flexbox par les navigateurs Web — Support de Flexbox par les navigateurs Web

Utiliser Grid Layout

La seconde technique utilise CSS Grid Layout qui est actuellement supporté par tous les navigateurs modernes (> 96.5 % d'utilisateurs supportés).

Contrairement à la technique précédente, aucun élément intermédiaire n'est nécessaire, le seul inconvénient réside dans le changement de la disposition de l'élément body en grid.

html {
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100%;
}

footer {
  grid-row-start: 2;
  grid-row-end: 3;
}

Tableau montrant le support de CSS Grid Layout par les navigateurs Web — Support de Grid Layout par les navigateurs Web

Changer la position du pied de page

La dernière technique se sert de la valeur « sticky » de la propriété « position » qui est aujourd'hui supportée par tous les navigateurs modernes (> 96.25 % d'utilisateurs supportés).

Cette technique n'a pas les inconvénients des deux méthodes précédentes : elle ne change pas la disposition de l'élément body et n'a pas besoin de balise intermédiaire.

html,
body {
  height: 100%;
}

footer {
  position: sticky;
  top: 100vh;
}

Tableau montrant le support de « position: sticky » par les navigateurs Web — Support de `position: sticky` par les navigateurs Web