Comment utiliser le Sticky Footer Code
Introduction
Il y a plusieurs méthodes pour trouver sticky footer à Google. J'ai essayé plusieurs d'entre elles et souvent elles échouent d'une façon ou d'une autre. Le problème paraît être que quelques unes de ces méthodes sont vieilles et ont peut être fonctionné avec des vieilles versions de navigateurs mais ne le font plus avec les nouvelles versions de navigateurs. Comme ces pages sont vieilles et ont été très linkées dans le passé, elles classent encore dans un rang élevé dans les recherches de Google. Plusieurs webmasters qui recherchent une solution de sticky footer finissent par se tirer des cheveux en essayant ces vieilles méthodes parce qu'elles sont les premières à apparaître dans les recherches de Google.
La solution Ryan Faits, est bien connue et fonctionne mais requiert un extra <div>sans contenu pour fournir une « poussée » extra. Quelques puristes de l'HTML peuvent considérer ceci comme un usage blasphématoire du code non-sémantique. Notre solution évite l'extra <div>.
Cette solution Sticky Footer présentée ici est basée dans l'information trouvée sur l'Article Explorant Footers de la Liste A Apart et ensuite il applique un clear fix hack pour maintenir le footer dans sa place à Google Chrome et autres navigateurs où le footer flotterait en redimensionnant la fenêtre. Le clearfix solutionne aussi des problèmes qui pourraient apparaître si vous êtes en train d'utiliser des floats pour créer des layouts de deux ou trois colonnes. Il a été testé sur plus de 50 navigateurs et il semble fonctionner parfaitement.
Le code HTML
Ci-dessous est la structure basique du code HTML. Vous verrez comment le footer <div> reste en dehors du wrap.
<div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
Vous placeriez vos éléments de contenu dans le <div>> principal. Par exemple, si vous étiez en train d'utiliser un layout de 2 colonnes flottantes, vous aurez peut-être ceci :
<div id="wrap"> <div id="main" class="clearfix"> <div id="content"> </div> <div id="side"> </div> </div> </div> <div id="footer"> </div>
Un entête pourrait-être placé dans le wrap mais en dessus du principal, comme ci-dessous:
<div id="wrap"> <div id="header"> </div> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
Si vous voulez placer n'importe quel de ces éléments en dehors du wrap ou du footer, vous aurez besoin alors d'utiliser le positionnement absolu sinon il désordonnera 100% les calculs d'hauteur.
Le Code CSS
Ci-dessous se trouve le code CSS qui ferra vos sticky footers rester collés dans le bas de la page.
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;}
Vous verrez que l'hauteur du footer est utilisée trois fois ici. Ceci est important et la valeur devrait être la même dans les trois cas. Les propriétés de l'hauteur élargissent le wrap <div> à l'hauteur complète de la fenêtre. La marge négative du footer l'apporte jusqu'au padding crée pour le <div> principal. Comme le principal reste dans le wrap, l'hauteur du padding est déjà une partie du 100%. De cette façon le footer reste dans le bas de la page
Mais nous n'avons pas fini encore. Nous devons ajouter les propriétés du clearfix au <div> principal.
Clearfix Hack au Secours
Plusieurs designers CSS vont trouver familier le Clearfix Hack. Ça résolut plusieurs problèmes des éléments flottants. Nous l'utilisons ici pour laisser le footer collé dans Google Chrome. Ça résolue aussi des problèmes qu'apparaissent quant on utilise des layouts de 2 colonnes où vous faites flotter votre contenu à un côté et la sidebar à l'autre côté. Les éléments flottants du contenu dans le <div> principal peuvent causer un footer décollé dans quelques navigateurs.
C'est ainsi que nous avons ajouté aussi ceci à notre stylesheet :
.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 */
Si vous préférez utiliser la méthode de Ryan Fait avec une poussée extra <div> vous aurez besoin d'appliquer un clearfix si vous êtes en train d'utiliser un layout flottant de plusieurs colonnes.
Problèmes Connus
Hauteurs et Marges
Utiliser des marges supérieures et inférieures dans quelques éléments peut diminuer votre footer à l'hauteur de cette marge, peut-être à un entête, ou le wrap ou le propre <div>'s principal. À la place utiliser le padding pour créer des espaces dans l'élément. Vous verrez que ceci est en train d'arriver si votre page a peu de contenu, et le footer devrait être dans le bas de la page, mais vous voyez que la scroll bar de votre fenêtre indique qu'il se trouve un petit peu en dessous du bas de la fenêtre. Trouvez la marge supérieure ou inférieure problématique et changez-la à padding.
Soyez attentif avec déclarer le padding dans le <div>principal dans une autre partie de votre style sheet. Si vous allez ajouter quelque chose comme celle-ci : padding:0 10px 0 10px ; vous finiriez par écraser l'important padding du bas qui est supposée d'être le même que l'hauteur de votre footer. Ceci pourrait causer que votre footer se superpose au contenu dans vos pages plus longues (à Google Chrome).
Taille des Caractères
En déterminant la taille des caractères dans votre style sheet, si vous utilisez des tailles relatives soyez conscients que quelques navigateurs peuvent créer des tailles de caractères plus grandes à cause de leur configuration du moniteur. Dans quelques éléments, comme dans le footer même, il pourrait casser les configurations d'hauteurs et créer un trou sous le footer s'il n'ya pas assez d'espace pour que le texte s'élargisse vers le bas. Alors, essayer d'utiliser des tailles absolues en utilisant des px au lieu de pt ou em.
