Ce post a été importé depuis mon ancien blog, il se peut donc qu’il y ait des erreurs d’affichage.
Il y a un petit moment, on s’était posé la question avec Bertrand de la bonne façon de pourvoir afficher un footer en permanence en bas de page, quelque soit le contenu, uniquement avec du HTML et du CSS. En clair, si il y a peu de contenu, le footer est affiché en bas de la fenêtre du navigateur, et si il y a du contenu, le footer va se décaler en bas de page et il ne sera affiché que lors du défilement.
C’est partit pour notre page de base ! Bon, pas de fioritures, on est pas là pour valider le test W3C :p (A noter que ca marche très bien avec une page valide ^^). On a une div contenu qui contient tout le contenu de notre page, et un div footer qui contient….allez, je suis sûr que vous avez deviné :).
Si vous avez l’oeil, vous verrez une div fin qui s’est cachée dans ce code..c’est la clé de la solution :)
Voici le code
lipsum…
lipsum…
lipsum…
lipsum…
Maintenant, passons au CSS ! Tout d’abord on réinitialise toutes les marges. ensuite, il faut étendre notre contenu à toute la page.Enfin, on va positionner notre footer non pas en bas de page, mais en bas de notre contenu, avec l’attribut margin-top avec une valeur négative. Donc notre contenu s’étend sur toute la surface d’affichage et notre footer, en bas de ce contenu. Cependant, il nous manque encore quelque chose. C’est la div fin et ses propriétés associées qui permettent de faire opérer la magie
html>
<!– Vue que IE est perdu avec min height … on redéfinit le CSS ! –>
<!–[if IE]>
<![endif]–>
lipsum…
lipsum…
lipsum…
lipsum…
Ce code n’est pas parfait, il faut notamment rajouter un header (logique..avec un footer ^^) : a vous de jouer !