Toutes les clefs pour réussir dans le e-commerce

Mes modules Prestashop

Fixer en bas de page un footer avec les css

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

Poster un Commentaire

10 Commentaires sur "Fixer en bas de page un footer avec les css"

Recevoir un email pour
avatar
Trier par:   plus récent | plus vieux | Plus de vote
Kiweb
Invité

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

Arkael
Invité

Hello, thx pour le petit truc, qui m’avais au passage complètement échappé ^^ et qui fonctionne très bien

fred
Invité

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

Tommy
Invité

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

Turet
Invité

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

HK
Invité
HK

Merci, je cherchais comment faire depuis des jours!

Hossein
Invité
Hossein

Bonjour,

Le truc marche presque très bien chez moi, il colle bien le footer en bas de page, mais juste en dessous de la fenetre, du coup il affiche un ascenceur dont la présence est indésirée.

J’ai raté un truc ?

cordialement.

feunteun
Invité
feunteun

Merci, beaucoup pour le tuyau, ça fonctionne très bien pour moi sous firefox et chrome.

wpDiscuz