Bonjour,
Mon problème me parait simple et pourtant impossible de parvenir à le résoudre. Je ne pense pas qu'il ait été traité dans le forum, ou du moins je ne l'ai pas trouvé.
Alors, voilà : je voudrais placer un <div> collé au bas de ma page quand le contenu de la page est court, et en dessous du contenu quand celui ci est long.
J'ai essayer beaucoup de combinaisons de position absolute, relative etc en CSS, mais aucune ne me donne satisfaction.
Je vous poste quand même mon code :
le css:
Code : 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 html { min-height: 100%; background-color: #00ff00; } body { margin: 0; min-height:100%; background-color: #ff0000; } #conteneur { background-color: #f0f0f0; width: 900px; min-height: 100%; margin: auto; } #haut { background-color: #ff00ff; position: relative; } #corps { position: relative; background-color: #00ffff; width: 80%; margin: auto; } #bas { background-color: White; position: relative; bottom: 0px; width: 900px;; clear:both; }
Code html : 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 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr"> <head> <title>Test CSS</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div id="conteneur"> <div id="haut">Titre</div> <div id="corps"> Le corps de la page.<br /> Le corps de la page.<br /> Le corps de la page.<br /> Le corps de la page.<br /> Le corps de la page.<br /> coucou </div> <div id="bas">Le pied de page</div> </div> </body> </html>
Dans cette version, le pied de page est "au milieu" ai lieu d'être en bas. Quand je le place avec position: absolute; il est bien en bas, mais quand je rallonge le contenu, celui-ci glisse en dessous.
Merci de m'aider, je coince vraiment...
PS : ça ne marche ni sous FF, ni sous IE7, mais au final je veux que ça marche sous FF.
Partager