[CSS] Caler le footer en bas de l’écran quelque soit le contenu

Voici un petit bout de code HTML/CSS qui va vous permettre de caler le footer en bas de l’écran, quel que soit la taille du contenu : CSS Sticky Footer. Le script a l’honneur d’être compatible avec la plupart des navigateurs (y compris IE6).

Voici d’abord la structure de votre page HTML à utiliser :

<div id="wrap">
<div id="main" class="clearfix">Votre contenu ici</div>
</div>
<div id="footer">Mon pied de page ici</div>

On met le code de notre site (excepté le footer) dans la balise #main. Et le footer dans #footer !

Pour la partie CSS, voici ce qu’il faut rajouter (accéder au fichier) :

* {margin:0;padding:0}
html, body {height: 100%}
#wrap {min-height: 100%}
#main {
    overflow:auto;
    padding-bottom: 150px
}
#footer {
    position: relative;
    clear:both;
    margin-top: -150px;
    height: 150px
}
/*Opera Fix*/
body:before {
    content:"";
    height:100%;
    float:left;
    width:0;
    margin-top:-32767px
}

Pour IE7, il faut rajouter un commentaire conditionnel :

<!-- [if !IE 7] -->
#wrap {display:table;height:100%}
<!-- [endif] -->

Dans le CSS, il n’y a que 3 valeurs à modifier suivant la hauteur de votre footer. Ce sont celles définies à 150px dans l’exemple ci-dessus.
Attention, la margin-top du #footer doit être négative.

Voir la démo sur le site de l’auteur.