Taille de bloc variable

**sandro8** · 12/12/2007, 18h30

Bonjour,
Voici mon casse tête:
J'ai 3 blocs. 2 de taille fixe (header et footer), et l'un de taille variable (main), au milieu.
Un fois n'est pas coutume, mon site marche sur FF mais pas sûr IE. En effet, il n'est pas possible de définir top et bottom au même temps sous IE. Si j'en fixe qu'un des deux attributs de "main", par exemple top, alors main debordera sur le footer. Je ne peux pas non plus fixer l'attribut de "main" heigth en % car la hauteru depend de la résolution de l'écran de l'utilisateur.

Voici mon 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
 
#main  {
	position:absolute;
	top:100px;
	bottom: 100px;	
	overflow: auto;
	width:100%;
	background-color:gray;
}
 
#header {
	position : absolute;
	height : 100px;
	top : 0px;
	width:100%;
	background-color:blue;
}
 
#footer {
	position : absolute;
	height : 100px;
	bottom : 0px;
	width:100%;
	background-color:red;
}
}

Et mon code html:

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>test</title>
<link rel=StyleSheet href="styles-site2.css" TYPE="text/css" MEDIA=screen>	
</head>
<body>
 
	<div id="header">			
		<h1>Bienvenue</h1>	
	</div>
	<div id="footer">
		<h1>Au revoir</h1>			
	</div>
	<div id="main">		
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 		 
	</div>
</body>
</html>

Une idée? ps: ça fait plusieurs jours que je cherche des réponses sur le net, mais aucun de correpond vraiment à ce cas...
Merci d'avance!!!

**defcon_suny** · 13/12/2007, 09h34

Salut,

Il est pas très clair ton problème. Généralement, on définit la structure d'un page comme ceci :

HEADER
CONTENT
FOOTER

Le FOOTER vient généralement se placer sous le CONTENT et ce suivant la hauteur de CONTENT qui peut tout à fait être variable.

Donc ta page HTML :

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
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
	<meta name="author" content="Hordies julien">
 
	<title>Untitled 1</title>
<style type="text/css">
*{
	padding:  0px;
	margin: 0px;
}
#header {
	height : 100px;
	width:100%;
	background-color:blue;
}
 
#footer {
	height : 100px;
	width:100%;
	background-color:red;
}
}
</style>
</head>
 
<body>
	<div id="header">			
		<h1>Bienvenue</h1>	
	</div>
	<div id="main">		
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 
		test test test test test test test test 		 
	</div>
 	<div id="footer">
		<h1>Au revoir</h1>			
	</div>
</body>
</html>

vois si cela te convient.

++

**sandro8** · 13/12/2007, 13h03

Merci de ta réponse,
J'ai omis de préciser que je ne souhaite pas d'ascenceur sur l'ensemble de la page. Si le contenu est trop grand pour tenir sur l'ecran, il aura un ascenceur personnel. Si par exemple on a une hauteru disponible de 800px, alors je voudrais que mes header et footer soient de 100 et le contenu de 600 (avec ascenceur si nécessaire mais que pour le contenu).
si on a une hauter plus importante, par exemple 1200, alors on aura toujours 100 pour header et footer, mais le content se sera adapté à la résolution de l'écran et fera 1000.
Dans tous les cas la somme des hauteurs des 3 blocs fera la hauteur disponible, sans débordements.
Donc, en gros, je voudrais des header et footer de taille fixe (c fait) et un content de taille fixe (qui ne dépende que de la résolution de l'écran et pas du contenu).
J'espère que c plus clair... Merci énormément de prendre le temps de répondre.

**defcon_suny** · 13/12/2007, 13h12

Et bien tu mets le CONTENT en overflow.

et tu travailles la largeur de tes div en % (100%) ainsi ils s'adapteront à la résolution d'écran de l'utilisateur.

++

**Bisûnûrs** · 13/12/2007, 13h21

Un truc comme ça :

http://josselin.willette.free.fr/cod...xe/index2.html

?

**sandro8** · 13/12/2007, 16h28

merci bcp!
En effet ça marche aussi bien sous ff que sous ie, à condition que le script ne soit pas bloqué par le navigateur...
Si qq'1 a une idée "pure CSS", je suis preneur!

Taille de bloc variable

CSS

Vue hybride

Discussions similaires

Partager

Partager