Tips CSS : Forcer le footer en pied de page

10 mars 2010 par Jordan Matejicek | Catégorie: CSS, XHTML |

Si comme moi vous recherchez une solution simple et rapide pour fixer le footer d’un site en pied de page, cet article est pour vous !
Avant de commencer, il est intéressant de noter que cette solution est compatible avec quasiment tous les navigateurs, une liste complète est disponible à cette adresse.

Site de présentation

Entrons maintenant dans le vif du sujet !

<div id="wrap">
	<div id="main" class="clearfix">
	</div>
</div>

<div id="footer">
</div>

Voici la structure du code HTML de vos pages.
Prenons l’exemple du template 4live :

Ce qui nous donne en code HTML :

<div id="wrap">
	<div id="top_menu">
		...
	</div>
	<div id="main" class="clearfix">
		...
	</div>
</div>
<div id="footer">
	...
</div>

C’est simple non ? Passons maintenant au fichier CSS :

html, body, #wrap {height: 100%;}

body > #wrap {height: auto; min-height: 100%;}

#main {padding-bottom: xx_footerheight px;}  /* Taille "height" de votre footer */

#footer {position: relative;
	margin-top: - xx_footerheight px; /* Taille "height" de votre footer en negatif */
	height: xx_footerheight px;
	clear:both;}

N’oubliez pas de changer la taille « xx_footerheight » du footer qui est utilisée 3 fois ici.
La propriété « height:auto » de la div #wrap permet d’élargir la hauteur de cette div à la hauteur de la fenêtre.
La marge negative de #footer permet de l’apporter jusqu’au padding de votre #main.

Reste à appliquer le hack clearfix qui corrige pas mal de problèmes avec les éléments flottants qui peuvent « décoller » le footer dans certains navigateurs.

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Nous en avons terminé !

Si vous souhaitez plus d’informations sur ce hack, rendez-vous sur le site de l’auteur ou postez un commentaire .