Hauteur du contenant en fonction de la page

**tarzanjane** · 30/05/2006, 10h32

Bonjour à tous,

Je suis actuellement en pleine création et un problème important ce pose à moi. Je cherche à faire un site qui soit completement flexible en hauteur et en largeur en fonction de la page.

Le site contient un bandeau haut, un centre et un pied de page. et le centre contient une colonne à gauche et une colonne à droite. Comme le montre le lien ci-dessous:

Essai

Mais lors de ma création, deux problèmes s'opposent à moi et se trouvent non-résolus:

1) Le centre dépasse en bas de page et fait automatiquement apparaitre un scrolling. Comment puis-je régler cette hauteur?

2) Entre les deux colonnes se trouvent le contenu et celui-ci n'apparait pas à l'écran alors qu'il est visible dans le code source.

Voici le code source:

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
 
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
</head>
 
<style>
 
body, html {
        margin: 0px;
        padding: 0px;
        }
 
#bandeau {
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #CCFF00;
        }
        
#centre {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100px;
        }
        
#footer {
        position: absolute;
        width: 100%;
        height: 25px;
        bottom: 0px;
        background-color:#FF9900;
        }
        
#barreGauche {
        position: absolute;
        width: 100px;
        height: 100%;
        background-color: #666666;
        }
        
#barreDroite {
        position: absolute;
        width: 100px;
        height: 100%;
        right: 0px;
        background-color: #666666;
        }
        
barreCentre {
        position: absolute;
        margin-left: 100px;
        margin-right: 100px;
        background-color:#CCCCCC;
        }
 
</style>
 
 
<body>
	<div id="bandeau"></div>
	<div id="centre">
		<div id="barreGauche">eryertert</div>
		<div id="barreDroite">ertertertert</div>
		<div id="barreCentre">sdgdfhg fgh </div>		
	</div>
	<div id="footer"></div>
</body>
</html>

Pouvez-vous m'aider rapidement, j'ai besoin d'aide, c'est très urgent.

Merci par avance

**laurentdusseau** · 30/05/2006, 11h13

Code :

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

1
2
3
4
5
6
barreCentre {
position: absolute;
margin-left: 100px;
margin-right: 100px;
background-color:#CCCCCC;
}

Il te manque # pour la déclaration je pense.

**Nemesys** · 30/05/2006, 11h17

En effet !

Et # c'est pour id, et . c'est pour class ! (juste pour info)

**tarzanjane** · 30/05/2006, 11h29

en fait, je viens de me rendre compte de cette erreur et je venais la modifier sur le forum quand j'ai vu vos réponses. J'ai mis sur le net la version avec le "#" ajouté. Cela resout en partie le probleme numero 2 mais le 1 reste toujours d'actualité. Voici le nouveau lien et le nouveau code source:

nouveau lien

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
 
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
</head>
 
<style>
 
body, html {
        margin: 0px;
        padding: 0px;
        }
 
#bandeau {
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #CCFF00;
        }
        
#centre {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 100px;
        }
        
#footer {
        position: absolute;
        width: 100%;
        height: 25px;
        bottom: 0px;
        background-color:#FF9900;
        }
        
#barreGauche {
        position: absolute;
        width: 100px;
        height: 100%;
        background-color: #666666;
        }
        
#barreDroite {
        position: absolute;
        width: 100px;
        height: 100%;
        right: 0px;
        background-color: #666666;
        }
        
#barreCentre {
        position: relative;
        height: inherit;
        margin-left: 100px;
        margin-right: 100px;
        background-color:#CCCCCC;
        }
 
</style>
 
 
<body>
	<div id="bandeau"></div>
	<div id="centre">
		<div id="barreGauche">eryertert</div>
		<div id="barreDroite">ertertertert</div>
		<div id="barreCentre">sdgdfhg fgh </div>		
	</div>
	<div id="footer"></div>
</body>
</html>

**spirou** · 30/05/2006, 23h53

Possible, mais il faut ajouter un bloc container qui contiendra tous les div avec juste une position relative.

**tarzanjane** · 01/06/2006, 16h31

Envoyé par spirou

Possible, mais il faut ajouter un bloc container qui contiendra tous les div avec juste une position relative.

J'ai essayé et j'ai modifié quelques autres trucs. La page à évoluée mais je encore un probleme:

lien

Les deux colonnes gauche et droites s'adapte à leur contenu mais l'autre ne s'agrandit pas en fonstion, or je veux que les 2 fassent toute la hauteur.

Voici le code source:

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
 
 
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Document sans nom</title>
</head>
 
<style>
 
body, html {
        margin: 0px;
        padding: 0px;
        }
        
#boitierScroll {
        position: absolute;
        width: 100%;
        height: inherit;
        background-color: #FF0000;
        overflow: auto;
        top: 0px;
        bottom: 25px;
        }
 
#bandeau {
        position: absolute;
        width: 100%;
        height: 100px;
        background-color: #CCFF00;
        }
        
#centre {
        position: absolute;
        width: 100%;
        height: auto;
        top: 100px;
        background-color: #009999;
        bottom: 0px;
        }
        
#footer {
        position: absolute;
        width: 100%;
        height: 25px;
        bottom: 0px;
        background-color:#FF9900;
        }
        
#barreGauche {
        position: absolute;
        width: 100px;
        height: inherit;
        top: 100px;
        bottom: 0px;
        background-color: #666666;
        }
        
#barreDroite {
        position: absolute;
        width: 100px;
        height: inherit;
        right: 0px;
        top: 100px;
        background-color: #666666;
        }
        
#barreCentre {
        position: relative;
        height: inherit;
        margin-left: 100px;
        margin-right: 100px;
        top: 100px;
        background-color:#CCCCCC;
        }
 
</style>
 
<body>
<div id="boitierScroll">
	<div id="bandeau"></div>
		<div id="barreGauche">eryertert</div>
		<div id="barreDroite">
		  <p>ertertertert</p>
		  <p>gbdgbdfb</p>
		  <p>dfbf</p>
		  <p>fdg</p>
		  <p>dfbg</p>
		  <p>dfbgdfgbh</p>
		  <p>dffbg</p>
		  <p>dfb</p>
		  <p>dfbg</p>
		  <p>dfb</p>
		  <p>dfb</p>
		  <p>dfb</p>
		  <p>dfb</p>
		  <p>ddfbdfb</p>
		  <p>dffb</p>
		  <p>dfbdfb</p>
		  <p>dfb</p>
		  <p>dfbdfb</p>
		  <p>dfb</p>
		  <p>dfbdfbxc</p>
		  <p>dsfvdfv</p>
		  <p>dfvdfv</p>
		  <p>dfvdfv</p>
		  <p>dfvdfv</p>
		  <p>dfvdfv</p>
		  <p>dfvk,kl,</p>
		</div>
		<div id="barreCentre">sdgdfhg fgh </div>		
</div>
<div id="footer"></div>
</body>
</html>

Hauteur du contenant en fonction de la page

HTML

Vue hybride

Discussions similaires

Partager

Partager