Footer positionné en pied de page

Bonjour à tous !
Je me suis inscrit sur ce forum en éspérent avoir une réponse à la question que je me pose depuis un certain temps.
Je suis en train de créer un nouveau site en ce moment et j'ai ce petit problème que beaucoup de personnes je pense ont déjà eu :

J'ai fait en bas de ma page un footer comportant quelques liens et le copyright.
Ce footer doit se trouver en bas de page (bottom:0px;) mais, dès que là page a un faible contenu (et qu'il n'existe donc pas de scrollbar à droite), le footer n'est pas en bas de la page.

Comment pourrais-je faire pour que mon footer soit TOUJOURS en bas de page, quelque soit la hauteur de ma page.

Vous remerciant d'avance de votre aide !

Bonjour,
le footer doit se positionner par rapport au viewport (zone d'affichage du navigateur), c'est donc le positionnement fixe qui faut choisir dans ce cas.

Code:

---

#footer {position:fixed; bottom:0}

---

sachant que (à l'instar du positionnement absolue), le positionnement fixe retire le bloc qui en est doté du flux normal, il n'aura par conséquent aucun impact sur les autres éléments.
Il te faudra trouver la meilleur alternative pour IE6 comme celle-ci :
http://www.nanoum.net/blog/6_absolue_et_fixe.html

Bonsoir,

Citation:

---

J'ai fait en bas de ma page un footer comportant quelques liens et le copyright.
Ce footer doit se trouver en bas de page (bottom:0px mais, dès que là page a un faible contenu (et qu'il n'existe donc pas de scrollbar à droite), le footer n'est pas en bas de la page.

Comment pourrais-je faire pour que mon footer soit TOUJOURS en bas de page, quelque soit la hauteur de ma page.

---

Il faut aussi un height 100% sur html et le body :

Code:

---

1 2	html, body { height:100% }

---

Citation:

---

Envoyé par Erwan31

c'est donc le positionnement fixe qui faut choisir dans ce cas

---

A préciser que si tu utilises la position fixe, ton pied de page sera toujours en bas de page, même si ta page est scrollable... (ce qui est à mon avis un effet indésirer...) enfin je crois (dis moi Erwan si je me trompe). merci

Merci de vos réponses, mais en effet, le footer en position fixed reste en bas du navigateur et non en bas du body (il est donc toujours visible), ce qui n'est pas l'effet recherché :s

N'auriez vous pas une autre solution ?

Citation:

---

Envoyé par mic54

le footer en position fixed reste en bas du navigateur et non en bas du body (il est donc toujours visible), ce qui n'est pas l'effet recherché :s

---

Garde la position absolute.

Et essai :

Code:

---

1 2 3

html, body { height:100%; } .tonfooter { position:absolute; bottom:0; }

---

Sa devrait fonctionner sans problème.

Citation:

---

Envoyé par StAfX

A préciser que si tu utilises la position fixe, ton pied de page sera toujours en bas de page, même si ta page est scrollable... (ce qui est à mon avis un effet indésirer...) enfin je crois (dis moi Erwan si je me trompe). merci

---

Non tu te trompes pas mais c'est à ma connaissance la seule solution
enviseageable pour conserver le bloc en pied de viewport quelque soit la quantité de contenu qui précède le bloc

@Macmillenium La solution que tu donnes ne fonctionne plus lorsque l'on scroll malheureusement (sinon j'aurais proposé cette solution).;)

A ma connaissance, il n'existe pas de solution robuste pour les navigateurs alternatifs sans passer par le positionnement fixe mais je dis bien à ma connaissance. Bref mic54 je te conseil si tu en a le temps de faire des recherches poussées pour savoir s'il existe une alternative plus intéressante à la solution que je te donne ;)

Citation:

---

Envoyé par Erwan31

@Macmillenium La solution que tu donnes ne fonctionne plus lorsque l'on scroll malheureusement (sinon j'aurais proposé cette solution).;)

---

J'ai oublié de préciser le min-height:100% sur le conteneur global :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="fr"> <head>   <style type="text/css"> html, body { height:100%; padding:0; margin:0; } .footer { height:25px; width:100%; position:absolute; bottom:0; background:red; } #global { position:relative; min-height:100%; background:green; } </style> <!--[if IE 6]> <style type="text/css"> #global { height:100%; } </style> <![endif]-->   </head>   <body> <div id="global"> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p> <p> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <br /> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla </p>     <div class="footer"></div>   </div>   </body> </html>

---

Citation:

---

Envoyé par Macmillenium

J'ai oublié de préciser le min-height:100% sur le conteneur global :

---

ça marche pas non plus hélas mais bien tenté ;)

EDIT: oups :oops:
Au temps pour moi je viens de tester et ça fonctionne! C'est bizarre il me semblait que cette solution ne passait pas! Bien joué Macmillenium.
Un petit problème tout de même sur Opera (peut-être corrigible)

Citation:

---

Envoyé par Erwan31

ça marche pas non plus hélas mais bien tenté ;)

---

Je viens de tester, sa marche bien chez moi :roll:

Citation:

---

Envoyé par Erwan31

C'est bizarre il me semblait que cette solution ne passait pas! Bien joué Macmillenium.

---

Si tu essai par exemple :

Code:

---

1 2 3 4

html, body { height:100%; padding:0; margin:0; } #global { height:100%; background:red; }

---

Et tu scroll, tu verra que le height 100% sur html et body est par rapport au viewport.
Comme les navigateurs modernes respectent les largeur/hauteur fixes, c'est normal que cela ne passe pas avec un simple height:100% ;)

Merci de vos réponses, j'ai testé l'histoire du min-height:100%; ça marche, mais pas sur ma page, le graphismes est foutu autrement, ça reste bizarre à adapter :s

Merci quand même, je vais voir comment bien faire !

EDIT :
Une petite fonction javascript permet de régler ça, et elle marche sur plusieurs navigateurs.