Hauteur de Footer jusqu'au bas de la page?

Bonjour à tous!

D'habitude je trouve toutes les solutions à mes problèmes en parcourant le site ou forum mais là je sèche.. (ou alors j'ai mal cherché )

Voila, dans mon site j'ai un header, en dessous un div contenu, suivi d'un div footer.. Je cherche à ce que quand le contenu de la page est court, (donc ne fait pas toute la hauteur de mon navigateur) mon footer (colé en dessous de mon contenu) aille quand jusqu'au bas de la page...

Un petit dessin pour mieux visualiser :


Merci pour votre aide,

Straw

Bonjour,

Dire au pied de page de prendre « toute la hauteur qui reste si la page est courte » sera à priori impossible (sauf à utiliser le positionnement absolu avec une valeur pour top et une valeur pour bottom, ce qui n'est pas du tout souhaitable ici et de toute façon pas compatible IE6). Par contre, on peut donner l'impression que c'est le cas.

Ici, il suffira d'avoir un conteneur global en min-height: 100% et ayant la couleur du pied de page comme couleur de fond.

Yep merci pour ta réponse, elle fonctionne, en adaptant toutefois quelques petites choses..

Tout d'abord, que le div conteneur global doit etre en position absolute sinon il ne prend pas le 100%. Que min-height n'est pas pris en compte par IE6 donc le remplacer par height. Et qu'il faut bien indiquer un height : 100% à HTML et BODY.

Cepandant, dans mon cas j'aimerais avoir un BG en dégradé qui commence à partir du haut de mon footer... Et là je bloque à nouveau

Je place tout de même le code pour celui qui voudrait l'utiliser :

HTML :

<div class="tout">
<div class="haut"></div>
<div class="centre"></div>
<div class="bas"></div>
</div>

CSS :

html, body{
margin : 0px;
padding : 0px;
height: 100%;
}

.tout{
width : 400px;
height: 100%;
background-color: #00CC66;
position:absolute;
top : 0px;
left : 0px;
}

.haut{
width : 400px;
height: 150px;
background-color:#CC6633;
}
.centre{
width : 400px;
height: 150px;
background-color: #6699CC;
}
.bas{
width : 400px;
height: 150px;
background-color: #00CC66;
}

Si quelqu'un a une solution pour le bg du footer..

Straw a écrit :
Yep merci pour ta réponse, elle fonctionne, en adaptant toutefois quelques petites choses..

Attention à ne pas faire de bêtises avec ces petites « adaptations », toutefois...

Notamment :

Straw a écrit :
le div conteneur global doit etre en position absolute sinon il ne prend pas le 100%

Faux. Le positionnement absolu, même s'il n'est pas particulièrement problématique ici (il le sera si on veut centrer le conteneur global via la technique des marges automatiques), n'est pas nécessaire. À supprimer.

Straw a écrit :
Que min-height n'est pas pris en compte par IE6 donc le remplacer par height.

Non : min-height n'étant pas pris en compte par IE6 et ce navigateur ayant une implémentation fautive de height qui donne un résultat proche d'un min-height, on appliquera un min-height: 100% pour tous les navigateurs, et un height: 100% pour IE6 uniquement, via un commentaire conditionnel.
Voir la FAQ pour :
- min-heightet IE ;
- les commentaires conditionnels.

Voilà pour les erreurs. Niveau optimisation, tu pourrais également utiliser des identifiants plutôt que des classes pour tes principaux éléments :

[b]HTML :[/b]
<div id="global">
...
</div>

[b]CSS :[/b]
div#global {
	min-height: 100%;
	/* etc. */
}

Straw a écrit :
Cepandant, dans mon cas j'aimerais avoir un BG en dégradé qui commence à partir du haut de mon footer... Et là je bloque à nouveau

Quelle hauteur, ce background ? S'il faut 200px de haut, tu peux faire un footer de 200px de haut, par exemple...