Comment positionner un texte ou un bloc au bas d’un conteneur ?

Astuce par (Lyon, France)
Mis à jour le . 49345 lectures.
Tags : css, position, absolute, relative, positionnement, bas, absolu, pied de page, footer

Il y a deux cas de figure:

  • soit le texte ou le bloc à positionner est le seul contenu de son élément parent;
  • soit l'élément parent contient plusieurs éléments.

Dans le premier cas, il suffit de créer un espace vide au dessus du texte ou du bloc à positionner en bas d'élément. On pourra utiliser:

  • margin-top: valeur; pour «pousser» le texte ou le bloc vers le bas
  • padding-top: value; sur le conteneur (élément parent).

Dans le deuxième cas — le conteneur contient plusieurs éléments, dont certains doivent se positionner normalement en flux —, on utilisera le positionnement absolu, sur le bloc à positionner en bas du conteneur:

#conteneur {position: relative;}
#bas {position: absolute; bottom: 0;}

Pour que le bloc #conteneur, parent ou ancêtre direct du bloc #bas, soit le référent de ce bloc, il faut le positionner, soit en relatif, soit en absolu. Si on ne le fait pas, alors le bloc #bas se positionnera tout en bas du premier bloc positionné parmi ses ancêtres, ou bien tout en bas de la fenêtre du navigateur.

Contraintes du média, contraintes d'accessibilité

Le média Web n'est pas paginé comme le média Print. Les concepts de page, de pied de page, etc., n'existent pas vraiment: sur un document web il n'y a pas de limite verticale; on utilise l'ascenseur (barre de défilement vertical). Cette spécificité du média explique qu'il est relativement difficile de créer un «pied de page» équivalent à ce que l'on trouve sur papier. Une solution simple pour régler ces histoires de pied de page est donc de s'adapter au média, et de laisser les informations et liens secondaires se placer naturellement à la suite du contenu de la page.

De plus, positionner un contenu tout en bas de page lorsque le reste du contenu de la page est court peut poser des problèmes d'accessibilité. Dans le cas où cela génère un espace vide entre la fin du contenu et le pied de page, un utilisateur de loupe d'écran ne verra probablement pas le pied de page, et pensera que ce vide correspond à la fin du contenu.

Cette contrainte se fait davantage ressentir avec l'avènement des smartphones et de la navigation "nomade".

Ressources