Comment garder votre pied de page à sa place?

Cet article est également disponible en coréen .

Un pied de page est le dernier élément de la page. Au minimum, il se trouve en bas de la fenêtre, ou plus bas si le contenu de la page est plus haut que la fenêtre. Simple, non? ?

Lorsque vous travaillez avec du contenu dynamique qui comprend un pied de page, un problème se produit parfois lorsque le contenu d'une page ne suffit pas à la remplir. Le pied de page, plutôt que de rester au bas de la page où nous voudrions qu'il reste, se lève et laisse un espace vide en dessous.

Pour une solution rapide, vous pouvez absolument positionner le pied de page en bas de page. Mais cela a son propre inconvénient. Si le contenu devient plus grand que la fenêtre, le pied de page restera «collé» au bas de la fenêtre, que nous le voulions ou non.

Cela montre le comportement que nous ne voulons pas et que nous voulons:

Regardons une approche pour y parvenir.

Maîtriser votre pied de page

index.html:

main.css:

#page-container { position: relative; min-height: 100vh; } #content-wrap { padding-bottom: 2.5rem; /* Footer height */ } #footer { position: absolute; bottom: 0; width: 100%; height: 2.5rem; /* Footer height */ }

Alors qu'est-ce que ça fait?

  • Le page-containercontourne tout sur la page et définit sa hauteur minimale à 100% de la hauteur de la fenêtre ( vh). En l'état relative, ses éléments enfants peuvent être définis avec une absoluteposition basée sur celle-ci ultérieurement.
  • Le content-wrapa un remplissage inférieur qui correspond à la hauteur du pied de page, garantissant qu'il reste exactement assez d'espace pour le pied de page à l'intérieur du conteneur dans divlequel ils se trouvent tous les deux. Un habillage est utilisé ici qui contiendrait tout le contenu de la page.
  • Le footerest réglé sur absolute, collant au bottom: 0de ce page-containerqu'il est à l'intérieur. Ceci est important, car il ne absoluteconcerne pas la fenêtre, mais se déplacera vers le bas si le page-containerest plus grand que la fenêtre. Comme indiqué, sa hauteur, fixée arbitrairement 2.5remici, est utilisée dans ce qui content-wrapprécède.

Et voila. Votre pied de page reste maintenant là où vous vous attendez!

Touches finales

Bien sûr, il s'agit de CSS, donc il ne serait pas complet sans quelques considérations UX spécifiques aux mobiles et une approche alternative utilisant min-height: 100%plutôt que 100vh. Mais cela a ses propres inconvénients.

Flexbox (avec flex-grow) ou Grid peuvent également être utilisés, et sont tous deux très puissants.

La méthode que vous choisissez dépend entièrement de vous et des spécificités de votre conception. Espérons que l'exemple et les liens ci-dessus vous aident à gagner du temps dans la prise de décision et la mise en œuvre.

Merci d'avoir lu. Voici quelques autres choses que j'ai écrites récemment:

  • Guide du débutant sur Elastic Container Service d'Amazon
  • Test de React avec Jest et Enzyme