Fixer en bas de page un footer avec les css
Classé dans : Programmation
Ce problème revient souvent et il existe différentes solutions plus ou moins pratiques et simples à mettre en place. Je vous propose ici une solution n’utilisant que du xhtml et du css.
Le code xhtml
<div id="theSite"> le contenu de mon site <!-- decommenter ce qui suit pour obtenir un ascenceur --> <!-- testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest testtesttesttest --> <div class="clearfooter"></div> </div> <div id="footer"> Le contenu de mon footer</div>
Le css
<!--
html, body {
height:100%;
margin:0;
padding:0;
}
#theSite {
min-height: 100%;
margin-bottom: -50px;
position: relative;
background-color:#0F0; /* on met le contenu du site en vert pour le repérer */
}
.clearfooter {
height: 50px;
clear: both;
}
#footer {
height: 50px;
position: relative;
background-color:#F00; /* on met le footer en rouge pour le repérer */
}
-->
/* nécéssaire pour les utilisateurs d'ie6 */
<!--[if lt IE 7]>
<mce:style><!
#theSite {
height: 100%;
}
-->
<!--[endif] -->
Vous l’aurez sans doute compris dans l’exemple que je fournis notre footer fera 50 px de hauteur.
Voir le résultat sans ascenceur et avec ascenceur.
Testé sour FF, ie6, ie7, safari, et google chrome
Livres PHP
- Permalien
- maniT4c
- 3 déc 2008 5:45
- Commentaires (7)
le 15 avril 2009 à 16:40
Hop, dans mes bookmarks sociaux ! Je l’avais utilisé il y a quelques années mais je ne savais plus comment. Merci pour le tuyau
le 12 septembre 2009 à 16:15
Hello, thx pour le petit truc, qui m’avais au passage complètement échappé ^^ et qui fonctionne très bien
le 8 décembre 2009 à 16:28
Juste un petite chose pour IE et les margin:auto;
Si le doctype n’est pas tout en haut de la page, IE ne le prend pas en compte, et donc n’interprête pas correctement le margin.
Je suis tombé sur ce problème, toujours bon à savoir …
Merci pour le css
le 8 décembre 2009 à 16:42
Merci fred pour le complément d’informations. Je n’ai jamais eu le problème mais sans doute parce que mon doctype est bien calé en haut. Coup de chance
le 14 mai 2010 à 11:29
Fait attention fait pas trop jouer avec le footer sinon google pénalise. J’ai déjà u la mauvaise expérience et cela ma valu le sandbox. Trop de liens de le footer. Sinon merci pour l’astuce
le 11 février 2011 à 14:38
Bonjour,
En tout cas pour moi ça ne fonctionne pas, j’ai testé avec
Firefox Setup 3.6.13.exe et explorer
cordialement
Cécile
le 19 février 2011 à 3:55
Merci, je cherchais comment faire depuis des jours!