Table des matières
Niveau
..........
En rapport...

idée

Il existe un moyen en CSS de “collé” un div en bas d'une page. Par en bas, je pense à :

Code

Pour ce faire vous allez devoir définir un peu de CSS. D'abord l'html :

html4strict
<html>
<body>
<div id="nonFooter">
Le contenu de ma page !
<div id="footer">
 
Mon pied de pages
</div>
</div>
</body>
</html>

Ce qui est dans footer est le pied de page, dans nonFooter, le contenu de la page. Voici le CSS à appliquer :

css
<style type="text/css">
html
{
height: 100%;
}
body
{
height: 100%;
}
#nonFooter
{
position: relative;
min-height: 100%;
padding-bottom: 30px;
}
* html #nonFooter
{
height: 100%;
}
#footer
{
position: absolute;
bottom: 0;
}
</style>

Il est à noter que le padding-bottom doit donner précisément la taille de votre pied de page.

Cette méthode ne fonctionne pas si vous avez des éléments de contenu placé en “position: relative”.

Sur le même sujet

Si la technique en pur CSS ne vous satisfait pas voici comment obtenir un pied de page positionné en javascript

En anglais

Retrouvez une doc plus commenté (en anglais) : http://www.themaninblue.com/writing/perspective/2005/08/29/

2eme solution

css
body, html {
        margin: 0;
        padding: 0;
        min-height: 100%;
}
 
div#container {
        position: absolute;
        top: 0;
        left: 0;
        background: yellow;
        min-height: 100%;
        width: 100%;
}
 
div#content {
        padding: 0 0 1.5em 0; /* Height of the footer */
}
 
div#footer {
        position: absolute;
        bottom: 0;
        left: 0;
        clear: both;
        width: 100%;
        background: red;
}
 
* html div#container {
        height: 100%; /* Fix IE 5.5, 6 and 7 */
}
 
html:first-child body {
        height: 100%; /* fix opera 9.22 and 7.10 */
}
html4strict
 
<div id="container">
        <div id="content">
                <p>Contenu ici</p>
        </div>
        <div id="footer">Ceci est mon pied de page</div>
</div>

Cette méthode à été trouver par antoine.