probleme de hauteur de div

**Sniper37** · 12/11/2009, 12h10

Bonjour,

j'ai un petit souci avec deux divs (rightCor et leftCor) se trouvant à gauche et à droite du contenu de la page, en effet, si je ne donne pas la hauteur en pixels exacts, les divs disparaissent, lorsque le contenu est plus large, les divs ne s'adaptent pas.

Code :

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

1
2
3
4
5
6
7
8
 
	<div id="ctn" style="width:100%;height:100%;">
	<div id="leftCor"></div>
	<div id="center_ctn" style="float: left; width: 98%;height:100%;">
         ....
     </div>
 
    <div id="rightCor"></div>

et le css des divs:

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
#leftCor {
	background: #FFFFFF url(../images/grn_fade_bg.gif) repeat-x
		scroll;
	float: left;
	width: 1%;
/** testé avec height:auto,100% **/
}
 
#rightCor {
	background: #FFFFFF url("../images/topcorner.gif") no-repeat;
	float: left;
	width: 1%;
   /** testé avec height:auto,100% **/
 
}

**Sniper37** · 12/11/2009, 12h18

au fait, les divs à gauche et à droite ne prennent pas la hauteur du parent alors que celui du milieu le prend très bien.

**Macmillenium** · 12/11/2009, 12h24

FAQ

http://css.developpez.com/faq/?page=...ment_flottants

**Sniper37** · 12/11/2009, 13h42

j'ai essayé les trois solutions, aucune ne fonctionne.

**Macmillenium** · 12/11/2009, 13h55

Envoyé par Sniper37

si je ne donne pas la hauteur en pixels exacts, les divs disparaissent

Normal, tes DIV sont vides.

Envoyé par Sniper37

au fait, les divs à gauche et à droite ne prennent pas la hauteur du parent alors que celui du milieu le prend très bien.

Il faut attribuer un height:100% aux DIV latérales.

**Sniper37** · 12/11/2009, 14h11

toujours le même résultat

:

Code :

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

1
2
3
4
5
6
7
<div id="ctn" style="width:100%;height:100%;overflow:hidden">
	<div id="leftCor" style="height:100%;"></div>
	<div id="center_ctn" style="float: left; width: 98%;height:100%;">
         ....
     </div>
 
    <div id="rightCor" style="height:100%"></div>

**Macmillenium** · 12/11/2009, 14h16

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title>Sans nom</title>
	<style type="text/css">
                html, body {
                        height:100%;
                        margin:0; padding:0
                }
                  
                #ctn {
                        /* width:100%; */
                        height:100%;
                        overflow:hidden;
                        padding:10px;
                        background:gray
                }
                
                #leftCor {
                        background: red;
                        float: left;
                        height:100%;
                        width: 1%;
                }
                 
                #rightCor {
                        background: green;
                        float: left;
                        height:100%;
                        width: 1%;
                }
                
                #center_ctn {
                        background:yellow;
                        float: left; 
                        width: 98%;
                        height:100%;
                }
        </style>
</head>
 
<body>
 
<div id="ctn">
	<div id="leftCor"></div>
	<div id="center_ctn"></div>
	<div id="rightCor"></div>
</div>
 
</body>
</html>

**Sniper37** · 12/11/2009, 14h32

je ne sais pas ce qui ne va pas dans ma page, mais ça ne fonctionne pas, ce n'est aussi simple que les trois divs; les 3 font juste la partie centrale de toute la page, donc, le div parent des divs latéraux est fils d'autres divs..
je ne comprend pas pourquoi ça marche pour le div central et pas pour les latéraux.

**Sniper37** · 12/11/2009, 17h22

re..

j'ai englober le tout dans un div global;

Code :

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

1
2
3
4
5
6
7
8
9
<div id="glob" style="height="800px;">
 
<div id="ctn">
	<div id="leftCor"></div>
	<div id="center_ctn"></div>
	<div id="rightCor"></div>
</div>
 
</div>

les div latéraux prennent la hauteur du parent, par contre si je donne au parent la hauteur 100%; les div disparaissent..

quelqu'un a une explication?

**Macmillenium** · 12/11/2009, 17h35

Hum ... déjà :

Code css :

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

1
2
<div id="glob" style="height:800px;">

Code css :

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

1
2
<div id="glob" style="height:100%;">

Pourrais tu nous montrer ton code (X)HTML/CSS complet STP ?

**Sniper37** · 13/11/2009, 09h27

rebonjour

voilà le code,

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
 
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head>
 
<!--
.rich-page{margin:auto 10px;width:auto;}
.rich-page-body{float:none;width:auto;}
 
--></style>
 
<title>Home</title></head><body>
 
<!-- page ---->
<div id="pg" class="rich-page ">
<!--header -->
<div id="pg:hd" class="rich-page-header ">
<div id="pg:hdc" class="rich-page-header-content">
<div style="" id="div_hd"><div id="hdlogo">
	<div style="float: left; width: 49%;" id="hdlft"><img border="0" src="images/_logo_dev.png"/></div>
	<div style="float: left; width: 19%;" id="div_ct"><img border="0" src="images/_image.png"/></div>
	<div style="float: right; width: 30%;" id="div_rt"><img border="0" src="image/_image.png"/></div>
	<div style="line-height: 0pt; height: 0pt; clear: both; visibility: hidden;"/>
</div><div style="display: block; height: 0pt; line-height: 0px; font-size: 0px; clear: both; visibility: hidden;">.</div>
<div id="hd_menu">			
</div></div>
</div>
</div>
<!--Contenu -->
<div id="pg:cnt" class="rich-page-content ">
<div class="rich-page-main">
<div class="rich-page-body ">
 
<!--- le probleme -->
<div style="height: 100%;" id="glob">
 
	<div style="height: 100%;" id="ctn">
 
	<div id="leftCor">
 
	</div>
 
	<div style="float: left; width: 98%; height: 100%;" id="center_ctn"><div style="" id="ctn_p"><div id="topPos">
 
			<div class="topG">
			<div class="contentTitle">
			<h2>titre</h2>
			</div>
			</div></div><div style="display: block; height: 0pt; line-height: 0px; font-size: 0px; clear: both; visibility: hidden;">.</div><div>
			<div id="core_ctn">
			<div>
			<div class="box">
			<div class="topBox">
			<div style="padding-left: 50px;">
 
 
</div>
			</div>
			<div class="box_ctn"><br/>
 
</div>
			<div class="botBox">
			<div style="padding-left: 50px;">
 
		</div>
			</div>
			</div>
			</div><div style="border: medium none ; height: 600px;" id="j_id94" class="rich-panel "><div id="j_id94_body" class="rich-panel-body ">
			CORE PAGE
			</div></div>
			</div></div></div></div>
 
	<div id="rightCor"/>
 
	</div>
 </div></div></div></div>
 
 <!--- Footer -->
 <div id="pg:ft" class="rich-page-footer ">
 <div id="pg:ftc" class="rich-page-footer-content">
</div>
 
</div>
 
</body></html>

peut être devrais-je poster le code css ? mais, il y'a trop de classes, si tu veux plus le code d'une classe précise, je te le donne..

Il y'avait un div parent qui n'avait pas le height à 100%, maintenant les divs latéraux s'affichent, mais, lorsque le contenu de la page est plus long, le bas de page et les div latéraux restent à la même hauteur, je relis la faq peut être j'y trouverais la solution..

merci..

**Sniper37** · 13/11/2009, 17h09

j'ai toujours ce problème: lorsque le contenu de la page dépasse son div contenant,ce dernier reste à la hauteur initiale, je teste avec une hauteur de 800px:

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
 
<div id="page">
<div id="header"> </div>
 
<div id="ctn">
	<div id="leftCor"></div>
	<div id="center_ctn">
         <div id="dynamic_ctn" style="height:800px;">
          ..........
         </div>
         </div>
	<div id="rightCor"></div>
</div>
 
<div id="footer"></div>

Je remaqure que sur IE7, le div center_ctn dépasse le footer; même lorsque dynamic_ctn ne contient pas de height en fixe..

**Sniper37** · 18/11/2009, 16h30

rebonjour,
est ce que quelqu'un a une idée.? j'ai plusieurs divs imbriqués, je ne sais lequel mettre flottant ou en position fixe, le but est que le dernier divs qui contient des objets dynamique donne la hauteur de ses parents, et ne pas dépasser ses parents.

Merci

probleme de hauteur de div

Dimensionnement en CSS

Discussions similaires

Partager

Partager