display: table- cell

Version imprimable

18/09/2013, 10h37
xRayane

display: table- cell

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 ?
18/09/2013, 10h55
Torgar

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

Code:

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:

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.

18/09/2013, 12h24
rodolphebrd

Bonjour,

2 solutions se présentent à vous:

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

Code:

.cadre_page {height:190px;}

2- supprimer le DIV cadre_page;

http://codepen.io/anon/pen/orByc
18/09/2013, 12h27
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…
18/09/2013, 12h29
rodolphebrd

Alors il faut peut-être envisager une solution en JavaScript.
18/09/2013, 12h30
xRayane

Ah mais je n'ai même pas besoin en fait lol ... merci pour les réponses.
18/09/2013, 12h31
rodolphebrd

Si vous avez une solution, montrez-la nous !
18/09/2013, 12h35
xRayane

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