Discussion :

[xRayane]

Bonjour !
J'ai un div principal et un div à droite pour le menu.
Les deux sont en display: table-cell.

Lorsque le div principal est + long que le menu, le menu prend la même hauteur (height) que le div principal, j'ai ainsi deux colonnes deux mêmes hauteur. Le soucis, c'est que si c'est le menu qui est plus long que le div principal, alors rien ne change. Comment je peux faire pour que le div principal prenne la hauteur du menu s'il est plus petit que lui ?

[Torgar]

Et si tu nous donnait le code qui va avec les explications ?

[xRayane]

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
 
.table_page {
	display: table;
	border-spacing: 2px;
}
#page_display_table-cell {
	display: table-cell;
	text-align: left;
	vertical-align: top;
}
.cadre_page {
	width: 600px;
	border: 1px solid #d9d9d9;
	padding: 2px;
	background-color: #ffffff;
	text-align: left;
	margin-top: 2px;
}
#cadre_menu_droite {
	border: 1px solid #d9d9d9;
	background-color: #ffffff;
	padding: 2px;
	width: 250px;
	display: table-cell;
	text-align: left;
	vertical-align: top;
	margin-top: 0px;
}
.titre_menu_droite {
	background-color: #e7e7e7;
	border: 1px solid #d9d9d9;
	padding: 2px;
}

Code html :

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
 
<div class="table_page" style="margin-top: -1px">
	<div id="page_display_table-cell">
		<div class="cadre_page" style="margin-top: 0px">
			Page<br />
			Page<br />
			Page<br />
			Page<br />
			Page<br />
			Page<br />
		</div>
	</div>
	<div id="cadre_menu_droite">
		<div class="titre_menu_droite">Navigation</div>
			Menu<br />Menu<br/>Menu
		<div class="titre_menu_droite">Titre</div>
			rklzemkre<br />
			krlekzrez<br />
			krlezrez
		</div>
</div>

En fait ce que je préférerai c'est que chaque div prenne la hauteur de son div conteneur (qui est en table-cell) sans l'agrandir.

[rodolphebrd]

Bonjour,

2 solutions se présentent à vous:

1- fixer la hauteur du bloc dont la valeur correspond à celle du menu;

Code :

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

.cadre_page {height:190px;}

2- supprimer le DIV cadre_page;

http://codepen.io/anon/pen/orByc

[xRayane]

Je ne peux pas supprimer cadre_page, c'est là qu'il y a le contenu de la page et je ne peux pas fixer la hauteur car j'utilise ce code pour chaque page et c'est donc variable…

[rodolphebrd]

Alors il faut peut-être envisager une solution en JavaScript.

[xRayane]

Ah mais je n'ai même pas besoin en fait lol ... merci pour les réponses.

[rodolphebrd]

Si vous avez une solution, montrez-la nous !

[xRayane]

Je n'en ai pas mais c'est particulièrement moche - car blanc et vide - si le cadre est trop grand.