Discussion :

[mic54]

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 !

[Erwan31]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

#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

[Macmillenium]

Bonsoir,

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
html, body { height:100% }

[StAfX]

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

[mic54]

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 ?

[Macmillenium]

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 CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Sa devrait fonctionner sans problème.

[Erwan31]

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

[Macmillenium]

@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 XHTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Erwan31]

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
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)

[Macmillenium]

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

Je viens de tester, sa marche bien chez moi

[Macmillenium]

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

Si tu essai par exemple :

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

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%

[mic54]

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.