Comment forcer un footer à toujours rester en bas de page

En design, ou plutôt dans la phase de découpe CSS / XHTML, il arrive de vouloir avoir un pied de page qui soit fixé tout en bas de l’écran, de sorte que même si le contenu ne va pas jusqu’en bas de la page, on ait le footer en bas et non celui-ci collé juste en dessous du contenu.

“Rien de plus simple, il suffit de peaufiner un peu le CSS en ajoutant un position:fixed; et un bottom:0; à notre div #footer…” direz-vous…

Oui! mais ça ne marche pas sur tous les navigateurs (sous IE6 par exemple pour changer…) car la valeur “fixed” de la propriété “position” peut ne pas être interprétée, ce qui nous a tous valu une perte prématurée de cheveux (d’ailleurs il est apparu que le taux de calvitie tend à diminuer depuis que IE6 meurt petit à petit… Troll inside )

Heureusement, cssstickyfooter.com apporte une solution à ce problème pour notre grande joie, et en français en plus!

Pour information, cette technique marche sur les navigateurs suivants :

Navigateurs de Windows

• Avant 11.7
• Chrome 0.4
• Crome 1.0
• Firefox 1.5
• Firefox 2.0
• Firefox 3.1
• Flock 1.2
• Flock 2.0
• K-Meleon 1.5
• Minefield 3.2
• MSIE 4.0
• MSIE 5.50
• MSIE 6.0
• MSIE 7.0
• MSIE 8.0
• Navigator 8.1
• Navigator 9.0
• Opera 0.27
• Opera 7.54
• Opera 8.53
• Opera 9.63
• Opera 10.0
• Safari 3.2
• Seamonkey 1.1
• Seamonkey 2.0
• Shiretoko 3.1

Navigateurs de Mac

• Chamino 1.6
• Firefox 3.0
• Safari 3.2

Navigateurs de Linux

• Dillo 0.8
• Epiphany 2.24
• Firefox 2.0
• Firefox 3.0
• lock 1.1
• Flock 2.0
• Galeon 2.0
• Iceape 1.1
• Iceweasel 2.0
• Iceweasel 3.0
• Kazehakase 0.5
• Konqueror 3.5
• Minefield 3.0
• Navigator 9.0
• Opera 9.63
• Opera 10.06
• Seamonkey 1.1
• Seamonkey 2.0
• Shiretoko 3.1