Â
Â
Vous recherchez une solution simple et rapide pour mettre en place sur vos sites des footer ?? Le site CSSStrickyFooter est pour vous.
Source CSS :Â
-
-
/*Â
-
Sticky Footer Solution
-
by Steve Hatcher
-
http://stever.ca
-
http://www.cssstickyfooter.com*/
-
-
* {margin:0;padding:0;}
-
-
html, body, #wrap {height: 100%;}
-
-
body > #wrap {height: auto; min-height: 100%;}
-
-
#main {padding-bottom: 150px;} /* Indiquez ici la valeur de la hauteur de votre footer*/
-
-
#footer {position: relative;
-
 margin-top: -150px; /* Indiquez ici la valeur négative de la hauteur de votre footer*/
-
 height: 150px; /* Indiquez ici la valeur de la hauteur de votre footer*/
-
 clear:both;}
-
-
/* CLEAR FIX*/
-
.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 */
-
Source Html :
-
-
<div id="wrap">
-
 <div id="main">
-
 </div>
-
</div>
-
<div id="footer">
-
</div>
-
Toutes les explications en détail sur cette page
A noter que ce footer est compatible avec une liste assez impressionnante de plateformes :
Navigateurs de Windows
- Avant 11.7
- Chrome 0.4
- Crome 1.0
- Firefox 1.5
- Firefox 2.0
- Firefox 3.1
- Flock 1.2
- Flock 2.0
- K-Meleon 1.5
- Minefield 3.2
- MSIE 4.0
- MSIE 5.50
- MSIE 6.0
- MSIE 7.0
- MSIE 8.0
- Navigator 8.1
- Navigator 9.0
- Opera 0.27
- Opera 7.54
- Opera 8.53
- Opera 9.63
- Opera 10.0
- Safari 3.2
- Seamonkey 1.1
- Seamonkey 2.0
- Shiretoko 3.1
Navigateurs de Mac
- Chamino 1.6
- Firefox 3.0
- Safari 3.2
Navigateurs de Linux
- Dillo 0.8
- Epiphany 2.24
- Firefox 2.0
- Firefox 3.0
- Flock 1.1
- Flock 2.0
- Galeon 2.0
- Iceape 1.1
- Iceweasel 2.0
- Iceweasel 3.0
- Kazehakase 0.5
- Konqueror 3.5
- Minefield 3.0
- Navigator 9.0
- Opera 9.63
- Opera 10.06
- Seamonkey 1.1
- Seamonkey 2.0
- Shiretoko 3.1
