pied de page fixe (qui ne bouge pas quand on redimensionne la page)

**Gorgo13** · 08/11/2007, 07h23

Bonjour,

Comme le titre l'indique, je voudrais savoir s'il est possible de faire en HTML/CSS (pas de javascript) un pied de page (bandeau) qui reste constamment au bas de la fenetre du navigateur, meme lors d'un redimmensionnement.

J'ai deja essaye de faire un DIV fixe (avec la propriete bottom:0px), mais ca ne donne pas le bon resultat: si je reduis la taille de la fenetre jusqu'au point de faire apparaitre une scrollbar a droite (c'est a dire que le contenu de la page devient trop grand), alors si je scroll avec celle-ci, le pied de page se met a scroller vers le haut (il se deplace avec la scrollbar).

Autrement dit, je voudrais que on pied de page (bandeau):
-reste au bas de la page lors des redimensionnements
-soit insensible au scroll vertical (que la scrollbar soit en haut ou en bas, le pied de page ne devrait pas bouger de place dans la fenetre)

C'est clair comme explication?...

Merci de me dire si c'est possible ou pas (je rappelle, sans javascript).

**slam** · 08/11/2007, 10h32

Je comprend pas trop la question mais j'éspère que ce bout de code vas t'aider.

Admettons que t'as page html est construite comme ça :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></meta>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<title>Titre de la page</title>
</head>
 
<body>
<div id="conteneur">
 
    <div id="banniere"></div>    /*C'est par exemple une bannière*/
 
    <div id="contenu">    /*Cette partie est le corps qui va se repêter pour s'étirer vers le bas*/
 
        <h3>Titre</h3> 
 
        <p>Contenu divers.</p>
 
    </div>
 
    <div id="pied"></div> /* Voila le pied de page qui nous interesse*/
 
</div>
</body>
</html>

Ton code CSS se présentera comme ça :

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
#conteneur
{
	width: 800px;
}
#banniere
{
	height: 258px;
	background: url(tabanniere.jpg);
             background-repeat: no-repeat;
}
#contenu
{
	background-image: url(elementarepeter.gif);
	background-repeat: repeat-y;
}
#pied
{
	background-image: url(tonpied.gif);
	background-repeat: no-repeat;
	height: 20px;
}

PS: Ce code est à améliorer ^^

**Gorgo13** · 08/11/2007, 11h29

Salut et merci pour ta reponse!

Mais mon probleme semble different. Quelques images pour mieux comprendre:

Voici mon layout de base. Tant que le contenu est plus petit que la taille de la page (moins la banniere et le pied), c'est ok.

Maintenant je redimensionne ma fenetre de navigateur. Le pied de page se deplace avec le bas de la fenetre. Tant que le contenu est plus petit que la taille de la page (moins la banniere et le pied), c'est toujours ok.

Maintenant je redimensionne encore ma fenetre de navigateur de sorte que le contenu soit plus grand que l'espace autorise par la taille de la fenetre et les tailles de la banniere et du pied (un scrollbar apparait).

Si je scroll vers le bas, je voudrais qu'il s'applique correctement au contenu, tout en gardant le pied a la position en bas de la fenetre de navigateur.

...voila, c'est plus clair? (a mon avis, mais dis moi si je me trompe, ton code ne fait pas exactement ca).

G. Treize.

**slam** · 08/11/2007, 14h49

Ok j'était un peu à coté de la plaque.

Pour ce que tu veux faire, personnellement je n'ai jamais fait, donc je ne pourrais pas t'aider plus.

A mon avis tu peux le faire avec du javascript mais j'en suis pas sûr.

Désolé,

Bonne continuation !

**Gorgo13** · 08/11/2007, 14h52

Merci quand meme

**Gorgo13** · 27/10/2009, 15h12

Salut,

quelqu'un m'a relance par message prive a ce sujet deja ouvert depuis longtemps... Je poste donc ici une solution que j'ai trouvee.

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
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
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!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=iso-8859-1" />
 
<title>CSS appli lourde</title>
 
<style type="text/css">
 
html{
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
 
	_padding:100px 0px 100px 0px;
}
 
body{
	margin:0;
	padding:0;
	height:100%;
	overflow:hidden;
}
 
#entete{
	background: #D0EB6A;
	overflow:hidden;
	position:absolute;  
	height:100px;
	top:0px;
	left:0px;
	right:0px;
 
	_width:100%;
}
 
#centre{
	overflow:hidden;
	position:absolute;
	top:100px;
	left:0px;
	right:0px;
	bottom:100px;
 
	_height:100%;
}
 
#centre .centretexte{
	background: #888888;
	position:absolute;
	overflow:auto;
	top:0;
	left:0;
	right:0;
	bottom:0;
	width:100%;
	height:100%;
 
	_position:relative;
}
 
#pied{
	background: #D0EB6A;
	overflow:hidden;
	position:absolute;
	width:100%;
	height:100px;
	bottom:0;
	left:0;
	padding:0;
}
 
</style>
 
</head>
 
<body>
 
 
 
	<div id="centre">
 
		<div class="centretexte">
 
			début du contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			contenu<br>
			fin du contenu
 
		</div>
 
	</div>
 
 
 
	<div id="entete">
 
		en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe en-tête fixe
 
	</div>
 
 
 
	<div id="pied">
 
		pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe pied de page fixe
 
	</div>
 
 
 
</body>
 
</html>

pied de page fixe (qui ne bouge pas quand on redimensionne la page)

CSS

Discussions similaires

Partager

Partager