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 
)
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%;
}
!
Bonjour @Denis,
oui, c’est assez simple : vous demandez au calque de votre footer (pied de page) de se coller en bas de page en position « absolue » (absolute) : cet ordre va donc primer sur tous ceux des calques positionnés « en absolu » plus haut dans le code, dont le calque sur lequel est votre menu déroulant, probablement (s’il est trop long). Le mieux serait de positionner le menu déroulant en haut de la page ?
bonjour, pardonnez moi de déterrer de vieux sujets mais j’ai remarqué que si j’insère ce pied de page il il interrompt la possibilité de parcourir un menu déroulant un peu avant le bas de la page, comment l’expliquer?
merci bien
@clem1711 : C’est le but
dsl mais ça ne marche pas. la div reste en bas de la fenêtre du navigateur, pas en bas de la page.
Merci
merci beaucoup