Séparation en trois partie d'une page html

**theNoob** · 24/09/2009, 14h57

Bonjour,

J'aimerais séparé ma page html en 3 parties horizontalement.. La partie du haut et la partie du bas doivent etre de taille fixe, et la partie du milieu doit faire le reste de la taille disponible avec un scrollbar..

Pour cela, j'ai utilisé des div (je sais pas si c'est la meilleur solution). J'ai réussi a positioné ma div tout en bas en utilisant la directive position:absolute et faire le scrollbar pour ma div du milieu.. Mais je n'arrive pas a faire pour qu'elle prenne la taille disponible entre la div du haut et du bas..

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
.hautFacClient{
	float:left;
	height:178px;
	width:100%;
}
.listeArticleFacClient{
	float:left;
	overflow: auto;
	width:100%;
	height:100%;
	background-color:#0F0;
}
.fondFacClient{
	float:left;  
	position:absolute;
	bottom:0px;
	height:208px;
	width:98%;
}

Pouvez-vous m'aider ? j'espere que mes explication on été assez clair..

Merci d'avance

**Macmillenium** · 24/09/2009, 15h02

Bonjour,

C'est le positionnement fixe qu'il faut utiliser

http://j-willette.developpez.com/tut...osition-fixed/

**theNoob** · 24/09/2009, 15h50

C'est pas exactement ca qu'il me faudrait.. Sur l'exemple que vous m'avez donné, le scrollbar est sur toute la page, alors qu'il me faudrait que sur la partie du milieu..

J'ai essayer de modifier un peu pour essayer de faire pour que ca fonctionne dans mon cas, mais sans résultat..

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
 
.hautFacClient{
	height:178px;
	position        : fixed;
 
	top:50px;
	left:15%;
	width:100%;
}
.listeArticleFacClient{
	padding         : 178px 0 208px 0;
    width           : 100%;
	max-height:5%;
	margin          : auto;
	overflow:auto;
 
}
.fondFacClient{
	position:Fixed;
	bottom:0;
	left:15%;
	height:208px;
	width:98%;
}

**Macmillenium** · 24/09/2009, 16h55

Hum ... c'est possible avec un peu de JavaScript :

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
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
 
<!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>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<title>Bloc milieu scrollable</title>
	<style type="text/css">
                body {
                        margin:0; padding:0
                }
                
                #header {
                        position:absolute;
                        left:0; top:0;
                        height:178px; width:100%;
                        background:green;
                }
                
                #content { 
                        background-color:#0F0;
                        overflow:auto;
                        position:relative;
                        top:178px; 
                }
 
                
                #footer {
                        position:absolute;
                        left:0; bottom:0;
                        height:208px; width:100%;
                        background:green;
                }               
        </style>
	<script type="text/javascript">
                function initsize() {
                        var HauteurViewport = document.documentElement.clientHeight || window.innerHeight;
                        document.getElementById('content').style.height = Math.ceil(HauteurViewport - 386) + 'px'
                }
        </script>
</head>
 
<body onload="initsize()">
 
	<div id="header">Header</div>
 
	<div id="content">
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content		
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
		content content content content content content content content content content content content content content content content 
	</div>
 
	<div id="footer">footer</div>
 
</body>
</html>

J'ai positionné #content en relatif afin de pouvoir attribuer la propriété top et éviter un bug minable de IE7- : IE7- ignore le margin-top attribué à un élément doté de Layout (ici overflow:auto pour IE7 et height pour IE7-) qui suit un autre élément positionné en absolute.
Ce bug se reproduit malheureusement dans d'autres cas de figures.

CandyGirl avait également proposée une solution en CSS mais qui ne fonctionne malheureusement pas sous IE6.

**theNoob** · 24/09/2009, 17h02

Parfait, Merci beaucoup pour votre aide !

Séparation en trois partie d'une page html

CSS

Discussions similaires

Partager

Partager