Quand on se lance dans le code d'un site web, le footer a toujours tendance à vouloir rejoindre ses copains en haut de page si ceux-ci ne prennent pas la hauteur de l'écran.
Je te montre ici une solution simple et efficace de résoudre ceci avec flexbox.
Flexbox pour le parent, flex-grow fait prendre de la place à l'enfant qui pousse tout les suivants au bout du parent ! 😅
le parent "body" est : flex, column, et min-height:100vh pour prendre au moins tout l'écran en hauteur.
l'enfant "content" est flex-grow:1 pour prendre un maximum de place poussant ainsi le footer en bas !
Je vous laisse aller voir ça sur CodePen