Probleme de hauteur avec les div sous IE

**Wanty** · 28/08/2006, 17h23

Je n'arrive pas à bien définir la hauteur d'un div sous ie, je commence à craquer !!!

en fait mon div commence à un certain top (exemple: top:40px) et doit aller jusqu'au bas de la page. Avec firefox il me suffit de rajouter un

Code :

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

bottom:0px

et ca marche mais sous ie evidemment ce n'est pas la même...

Quelqu'un aurait il une solution, je ne trouve plus, j'ai l'impression d'avoir tout essayé

voici mon code 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
<style media="screen" type="text/css">
<!--
html, body {
 margin: 0;
 padding: 0;
 height: 100%
}
 
/* 	Div composant la div d'indexation	*/
 
.div_contenu
{
     position: absolute;
     top:72px;
     left:0px;
     bottom:0px;
     width: 500px;
     overflow: auto;	
     font-size:10pt;
     background-color:green;
}
 
.div_view
{
	position:absolute;
	left: 503px;
	top: 40px;
	bottom: 0px;
	right:0px;
	background-color:yellow;
}
 
.div_info_doc
{
	position: relative;
	top:0px;
	left:0px;
	right:0px;
	height:30px;
	overflow: auto;
	color: #000000; 
	padding: 5px;
	font-weight: normal; 
	font-size: 10px; 
	font-family: Verdana, Arial, Helvetica;
	background-color:red;
	}	
-->
</style>

Et le html :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
<body>	
 
<div class="div_info_doc" id="div_info_doc"></div>
 
<!-- CONTENU-->
<div class="div_contenu" id="div_contenu"></div>
 
<!-- FENETRE DE VISUALISATION-->
<div class="div_view" id="div_view"></div>
 
</body>

Voila ! merci d'avance

**fallais** · 28/08/2006, 18h09

Une position absolue se determine via top et left !

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
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}

.div_contenu{
position: absolute;
top:72px;
left:0px;
height: 100%;
width: 500px;
overflow: auto;	
font-size:10pt;
background-color:green;
}

.div_view{
position:absolute;
left: 503px;
top: 40px;
width: 100%;
height: 100%;
background-color:yellow;
}

Voila

**Wanty** · 29/08/2006, 10h45

Merci, pour cette réponse cela résoud presque mon problème ...

Parce qu'avec le css que vous m'avez communiqué, la div de droite (div_view) à une largeur de 100% de l'écran or ce div commence à un left de 503px. Donc ça dépasse de l'écran. Ce que j'aimerais c'est que cette div commence à left:503px; et s'arrête à Right:0px; mais encore une fois cela fonction sous firefox mais pas ie.

Merci encore...

**speedev** · 29/08/2006, 10h55

Salut

Il ne te manquerait pas ces propriétés CSS suivantes pour IE?

float:left;
float:right;

**Wanty** · 29/08/2006, 11h08

peu etre mais ou dois-je les mettre ?

**fallais** · 29/08/2006, 11h28

Envoyé par Wanty

Merci, pour cette réponse cela résoud presque mon problème ...

Parce qu'avec le css que vous m'avez communiqué, la div de droite (div_view) à une largeur de 100% de l'écran or ce div commence à un left de 503px. Donc ça dépasse de l'écran. Ce que j'aimerais c'est que cette div commence à left:503px; et s'arrête à Right:0px; mais encore une fois cela fonction sous firefox mais pas ie.

Merci encore...

J'ai modifier le code entre temps, rien ne depasse j'ai testé

**Wanty** · 29/08/2006, 11h38

J'ai modifier le code entre temps, rien ne depasse j'ai testé

Essayez de mettre un texte tres long dans la div : "div_view". On voit que le texte dépasse sur la droite mais comme l'overflow est à hidden, forcément on a pas l'impression mais le texte est bien tronqué. En fait il continue sur la droite mais on ne le voit pas ...

Merci

**Wanty** · 29/08/2006, 11h44

J'ai fait un petit changement :

Code :

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

1
2
3
4
5
6
7
8
9
10
.div_view{
position:absolute;
left: 503px;
top: 40px;
width: 100%;supprimé
right:0px;
height: 100%;
background-color:yellow;
}

avec firefox --> Parfait. Mais avec ie, celle ligne n'est pas prise en compte. Si je l'enlève, la page a la même apparence sur les deux navigateurs, mais ce n'est pas cette apparence que je cherche. Sans le :

Code :

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

 right:0px;

la largeur de la div s'adapte au contenu. Or c'est le contenu qui doit s'adapter à la largeur de la div ...

Voila...

Probleme de hauteur avec les div sous IE

HTML

Discussions similaires

Partager

Partager