Un footer toujours en pied de page

Voici comment résoudre une des galères pour un intégrateur, mais (malheureusement) encore demandé par les graphistes… positionner le footer (pied de page) en bas de la fenêtre du navigateur, et ce, quel que soit le contenu.

Cette solution vient du site cssstickyfooter.com, et avantage, ici ce n’est pas une solution « javascript » (comme celle proposé sur le site pompage.net) qui est proposé mais bien une solution purement CSS et qui fonctionne avec nombre de navigateurs (dont Chrome le plus récent).

xHTML :

[html]
<div id="wrap">
<div id="main">
ici le contenu
</div>    <!– /main –>
</div>    <!– /wrap –>

<div id="footer">
ici le pied de page
</div>   <!– /footer–>
[/html]

CSS :

[css]
/*
Sticky Footer Solution
by Steve Hatcher
http://stever.ca
http://www.cssstickyfooter.com
*/

* {margin:0;padding:0;}

/* must declare 0 margins on everything, also for main layout components use padding, not
vertical margins (top and bottom) to add spacing, else those margins get added to total height
and your footer gets pushed down a bit more, creating vertical scroll bars in the browser */

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

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

#main {padding-bottom: 150px;} /* must be same height as the footer */

#footer {position: relative;
margin-top: -150px; /* negative value of footer height */
height: 150px;
clear:both;}

/* CLEAR FIX*/
.clearfix:after {content: &quot;.&quot;;
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 */
[/css]

Vous trouvez ces deux sources, une démo ainsi que les navigateurs compatibles avec cette méthode sur le site officiel.

Lien :

• www.cssstickyfooter.com