picture picture
septembre 21, 2017 (X)HTML, CSS 0 Commentaire

Comment avoir un footer collé en bas de page ?

Le problème des pages dynamiques (dont le contenu est extrait d’une base des données), c’est qu’on ne peut pas prévoir la hauteur de la page. Les calques relatifs se positionnant par empilement, on ne peut donc pas compter sur les calques supérieurs pour coller un pied de page (footer) en bas

L’issue CSS est pourtant simple.

La solution consiste dans un premier temps à créer un conteneur en position relative, qui occupe 100% de la hauteur de la page (avec l’attribut min-height, qui est reconnu par tous les navigateur (ormis quelques versions d’Internet Explorer relevant de la paléo-informatique :roll: )

Dans ce conteneur vous pouvez empiler tous les calques que vous voulez, par commodité dans mon exemple je n’en ai créé qu’un seul appelé « main ».

L’astuce consiste à insérer en dernier un calque en position absolue et avec une hauteur fixe, nommé « footer » par commodité, ce qui fait qu’il ne dépendra pas de ce qui s’empile au dessus de lui.

Le code HTML (minimaliste, OK !)

<html>
<body>
<div id="container">
   <div id="main"></div>
   <div id="footer"></div>
</div>
</body>
</html>
									

Le code CSS (minimaliste aussi, re-OK !)

html, body {
   margin:0;
   padding:0;
   height:100%;
}
#main {
   min-height:100%;
   position:relative;
   padding-bottom:100px;   /* Hauteur du pied de page */
}
#footer {
   position:absolute;
   bottom:0;  /* on le colle en bas */
   width:100%;
   height:100px;   /* Hauteur du pied de page */
}
									

Pour les perfectionnistes qui souhaitent une rétro-compatibilité avec IE 5.5 et IE6, vous pouvez rajouter dans votre code CSS :

#container {
   height:100%;
}
									

(personnellement je ne le fais pas : c’est la seule façon de forcer les utilisateurs dégoutés à mettre à jour leurs navigateurs obsolètes…)

 

That’s all Folk 8) !

No Responses to “Comment avoir un footer collé en bas de page ?”

Commentaire

Name

Mail (ne sera pas publié)

Website

Laisser ces deux champs tels quels :
:D :-) :( :o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: