Mettre le footer en bas

Problème

Lorsque le contenu d'une page n'est pas très volumineux, on fini souvent avec le problème suivant:

Comme vous pouvez le constater, le footer du site web remonte puisqu'il n'y a pas assez de contenu dans le main pour le pousser au bas de la page. Ce n'est pas très beau et on va vouloir régler ce problème.

Solution

La technique présenté ici pour pousser le footer au bas de l'écran utilise la disposition flex. Le but est de redistribué l'espace vide qui est en bas de la page et de le mettre à la fin du <main>. Voici comment faire:

Cette technique fonctionne de façon intéressante:

1. On place le <header>, <main> et <footer&gt; sur un axe flex vertical.
2. On s'assure que le body prends toute la page avec la propriété min-height: 100vh;.
3. On redistribue l'espace du bas de la page à la fin du main avec la propriété flex: 1;

Gestion de l'espace vide

La gestion de l'espace vide dans une disposition flex est complexe et ne sera pas présenté dans ce cours. Toutefois, si le sujet vous intéresse, ce sont les propriétés flex-growth, flex-shrink et flex-basis qui contrôle le tout.

Dans notre cas, nous utilisons la propriété flex qui est un raccourci de ces 3 propriétés pour mettre le flex-growth de notre <main> à 1, ce qui lui fait prendre tout l'espace vide disponible et pousse, par conséquant, le <footer&gt en bas de l'écran.