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

[Dude1205]

Salut,
Je ne suis pas sûr d'avoir bien compris ton probleme mais il semble que tu cherches à avoir deux colonnes de meme taille quels que soient les contenus de tes deux colonnes.
Ce que je fais dans ce cas (en esperant que la solution s'applique à ton probleme ), c'est que je donne l'illusion d'avoir deux colonnes de meme hauteur.
Je donne à la colonne de gauche une bordure à droite et à la colonne de droite une bordure à gauche et je les fais se chevaucher avec une margin negative.

De cette maniere, la separation des deux colonnes se fait sur la totalite de la hauteur.

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
 
#colonneGauche {
	line-height:1.5em;
	margin-top:1em;
	margin-left:2%;
	padding-right:2%;
	float:left;
	clear:left;
	width:60%;
	border-right: solid .167em white;
}
 
#colonneDroite {
	margin-top:1em;
	margin-left:-.167em;
	padding-left:2%;
	border-left:solid .167em white;
	float:left;
	clear:right;
	width:32%;
	font-size:11px;
}

Ca se complique si le background de tes colonnes differe...