Pied de page toujours en bas avec Javascript et CSS

C’est possible ? Parce qu’avec les tableaux… Tôt ou tard, ça ne rate jamais, la question revient sur le tapis de souris. Et là, de vous lancer dans une diatribe comme quoi ça ne sert absolument à rien de vouloir ce footer toujours en bas, que si on manque de contenu, on n’a qu’à en créer, etc. Certes, vous y croyez, et votre interlocuteur commence même à trouver que ce pauvre footer tout seul en bas a l’air de s’ennuyer ferme. Seulement, vous êtes un professionnel, et même si ça ne sert à rien, vous aimeriez bien trouver la solution 😉

Parmi les nombreuses manières permettant d’obtenir un pied de page qui se cale systématiquement en bas de page lorsque le contenu n’est pas suffisant, j’ai retenu deux méthodes intéressantes. C’est-à-dire n’utilisant pas trop de hacks afin d’optimiser la lisibilité et la maintenabilité du code.

• La première, propose d’utiliser uniquement CSS : la propriété min-height appliquée au contenu, un padding-bottom pour l’élément avant le footer, et pour ce dernier, un margin-top de la même valeur, un commentaire conditionnel pour Internet Explorer, et c’est parti ! Sauf, qu’après des tests intensifs sur MacOSX et Windows, il s’avère que cette solution ne donne pas entièrement satisfaction sur tout les navigateurs (Opera Window et MacOSX et Safari), ce que je trouve gênant.
• La deuxième, est une solution Javascript utilisant le DOM de façon particulièrement élégante. Le footer se trouve bien en bas de page, mais si l’on veut que la couleur de fond du contenu se propage jusqu’au pied de page, il nous faut trouver autre chose…

Après quelques hésitations, j’ai trouvé la voie en associant les deux méthodes : la fonction Javascript pour le placement du footer, et la propriété min-height ainsi que le commentaire conditionnel pour IE afin de gérer la couleur de fond.En prime, ce mix rend inutile l’ajout de #lastelement que je ne trouvais pas particulièrement élégant. Dans Opera et Firefox, le footer ne se cale pas en temps réel contrairement à Internet Explorer et Safari, ce qui n’est pas particulièrement gênant.

Je vous laisse avec la démo du pied de page toujours en bas.

Télécharger le fichier .html ou .php et les images

Linkographie pour des pieds de page positionnés

http://web.covertprestige.info/test/08-pied-de-page-en-bas-ecran-1.html

http://www.covertprestige.info/ressources

L’exemple de la première méthode utilisant uniquement les CSS, ainsi que d’autres astuces concernant la conception de site à l’aide des feuilles de style.

http://pompage.net/pompe/pieds/

Cet article propose d’étudier les méthodes pour positionner des pieds de page en respectant les standards.