Mettre un pied de page toujours en bas

**Le Mérovingien** · 25/02/2008, 18h34

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.

**kaiser59** · 25/02/2008, 21h36

Salut,

Il te suffit simplement de placer ailleurs ton conteneur, ce qui donne :

Code html :

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

1
2
3
4
5
6
7
8
<div id="header"></div>
 
<div id="conteneur">
  <div id="menu"></div>
  <div id="sub_contenu"></div>
</div>
 
<div id="footer"></div>

Code css :

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

1
2
3
4
#header, #conteneur, footer {margin-left:auto;margin-right:auto;width:1000px;}
 
#header, #footer {height: 80px;}
#footer {clear: both;}

etc...

**Le Mérovingien** · 25/02/2008, 22h23

Merci de m'avoir répondu, mais je crois qu'on s'est mal compris, ou alors je n'ai pas bien recopier ton code, parce que quand je mets seulement ce que tu as écrit, il ne place pas du tout le footer en bas de la page, mais seulement à la suite du reste. J'ai ceci comme css maintenant (j'ai remplacé le contenu du body de la page html par le tien, en rajoutant du texte entre les balises pour voir le positionnement) :

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
html
{
 height: 100%;
 background-color: #00ff00;
}
body
{
  margin: 0;
 height:100%;
 background-color: #ff0000;
}
 
#header, #conteneur, #footer
{
  margin-left:auto;
  margin-right:auto;
  width:1000px;
}
 
#header, #footer {height: 80px;}
#footer {clear: both;}

Moi je veux le footer collé en bas de la page meme quand il n'y a pas assez de contenu au dessus...

**blueice** · 25/02/2008, 22h48

Exemple complet :

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
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
<!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" xml:lang="fr" lang="fr">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Untitled</title>
	<style type="text/css" title="text/css">
/* <![CDATA[ */
			html, body {
				height: 100%;
			}
			body {
				margin: 0;
				padding: 0;
				font: 12px/1.5 verdana, arial, helvetica, sans-serif;
			}
			#container {
				position: relative;
				min-height: 100%;
				height: 100%;
				voice-family: "\"}\"";
				voice-family: inherit;
				height: auto;
			}
			html>body #container {
				height: auto;
			}
			#content {
				padding: 10px;
				background-color: #a6c;
				padding-bottom: 48px;
			}
			#footer {
				position: absolute;
				bottom: 0;
				padding: 10px;
				background-color: #609;
				width: 75%;
			}
			#footer h1 {
				color: #fff;
				padding-bottom: 0;
			}
			h1, p {
				margin: 0;
				padding-bottom: 1em;
			}
			h1 {
				font-size: 12px;
				line-height: 1.5em;
			}
/* ]]> */
</style>
</head>
<body>
<div id="container">
			<div id="content">
				<h1>Contenu</h1>
				<p>blablabla blablabla blablablablablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla </p>
			</div>
			<div id="footer">
				<h1>Footer</h1>
			</div>
		</div>
</body>
</html>

**Le Mérovingien** · 26/02/2008, 14h14

Merci blueice, c'est exactement ce que je cherchais !

J'ai essayé de comprendre à quoi servait chacune des lignes du code css, mais je ne comprends pas celle là :

Code :

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

1
2
3
4
html>body #container {
                height: auto;
            }

Pourrais tu me dire à quoi elle sert (d'autant plus que quand je la retire ça marche toujours...) ?
Je vais adapter tout ça pour mon site, sachant que je risque d'avoir d'autre difficultés, car par exemple je voudrais laisser un espace entre le haut de la page et le header, er je ne sais pas quoi utiliser : margin-top, ou padding-top, ou position et co. mais je vais me débrouiller.

@+ et merci encore.

Je mettrais le sujet résolu quand tout marchera impec dans la "vrai" version du site.

**blueice** · 26/02/2008, 14h31

C'est pour IE5 windows...

**Le Mérovingien** · 27/02/2008, 12h34

Dac pour IE5...

Bon, tout marche bien comme je voulais, merci beaucoup pour le coup de main, je crois que je me serais pris la tête encore longtemps si vous n'étiez pas là...

Bonne journées, @+

Le Mérovingien

Mettre un pied de page toujours en bas

CSS

Discussions similaires

Partager

Partager