Discussion :

[rinuom99]

Bonjours,

Je souhaite réaliser une page contenant 2 parties comme suit:

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
 
 
div#page {
	width:500px;
	clear:both;
}
 
div#part1 {
	width:350px;
	float:left;
}
div#part2 {
	width:150px;
	float:left;
}
div#sep{
	width:500px;
              height:1px;
	float:left;
}

Code :

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

1
2
3
4
5
6
7
 
<div id="page">
    <div id="part1"></div>
    <div id="part2"></div>
    <div id="sep"></div>
 
</div>

maintenent je veux que le div part2 occupe tout la hauteur reste, mais le probleme c que je connai pas la hauteur du div part1 ??

NB: les div part1 et part2 ne sont pas vide,

merci d'avance

[FraK]

établir une hauteur min et max pour chaque part en pixel ou pourcentage.

[rinuom99]

oui c sa le problème, je connais pas la hauteur max qui est défirent d'une page a une autre, et même sur la même page, elle se change selon le contenu des autres div

[floran77]

Bonjour !! Désolé j'ai un peu de mal à comprendre, tu veux faire quoi exactement ?

[rinuom99]

ok, je veux que lorsque j'aligne le div page avec le clear:both (prend la hauteur maximale entre les div part1 et part2), le div avec la petite hauteur (part1 ou part2) doit s'occupe le reste d'espace pour qu'ils seront tous avec la même hauteur

[floran77]

Alors en javascript (il faut ajouter le code après la déclaration de tes div), ça donne ça:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
<script type="text/javascript">
   var taillePart1 = document.getElementById("part1").clientHeight;
   var taillePart2 = document.getElementById("part2").clientHeight;
 
   if(taillePart1>taillePart2){
		document.getElementById("part2").style.height = taillePart1;
   }else{
		document.getElementById("part1").style.height = taillePart2;
   }
</script>

Propriétés valables sur tous les navigateurs normalement, après en css j'ai pas d'idées :s