Comment adapter la hauteur d'une div enfant à une div parent.

**infovect** · 05/03/2015, 15h51

Bonjour,
Pouvez-vous m'aider SVP
J'aimerais que la balise B et C ont la même auteur.
sachant que :
- A à une hauteur variable à son contenu.
- B et C appartiennent à A.
- B et C sont cote à cote et alignés horizontalement.
- B a une largeur fixe.
- C a une hauteur variable selon son contenu.

voici le code :

HTML :

Code html :

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

1
2
3
4
5
<div class="a">
    <div class="b">bbbb</div>
    <div class="c">cccc<br>cccc<br>cccc<br>cccc<br>
    </div>
</div>

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
.a{
	width: 200px;
	height:auto;
	background-color:#FF0004;	
}
.b{
	width: 40px;
	height:100%;
	background-color:#000000;
	float: left;
}
.c{
	width: 100%;
	height:auto;
	background-color:#1FBEC5;
}

Merci

**NoSmoking** · 05/03/2015, 21h56

Bonjour,
pour arriver à tes fins tu as au moins 4 options (et surement d'autres qui ne me viennent pas à l'esprit)
- float:left
- position:absolute
- display:table
- display:flex
chacune à ses avantages et ses inconvénients.

un exemple à analyser pour voir tout cela

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
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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>[CSS]2 colonnes</title>
<meta name="Author" content="NoSmoking">
<style>
html, body {
  font: 90%/1.5 Verdana, sans-serif;
  margin:1em 3em;
  padding:0;
}
h1, h2{
  color:#069;
  margin-left:-2em;
}
.conteneur {
  width:50em;
}
/*//FLOAT//////////////////*/
.la_maman_1 {
  overflow:hidden;
  background:#abc;
}
.la_gauche_1 {
  float:left;
  width:20%;
}
.la_droite_1 {
  float:left;
  background:#cde;
  width:80%;
}
/*//ABSOLUTE///////////////*/
.la_maman_2 {
  position:relative;
}
.la_gauche_2 {
  position:absolute;
  width:20%;
  background:#abc;
  top:0;
  bottom:0;
}
.la_droite_2 {
  background:#cde;
  padding-left:10em;
}
/*//TABLE//////////////////*/
.la_maman_3 {
  display:table;
  background:#abc;
}
.la_gauche_3 {
  display:table-cell;
}
.la_droite_3 {
  display:table-cell;
  background:#cde;
  width:80%;
}
/*//FLEX///////////////////*/
.la_maman_4 {
  display: flex;
  flex-direction:row;
  background:#abc;
}
.la_gauche_4 {
  width:20%;
}
.la_droite_4 {
  background:#cde;
  width:80%;
}
</style>
</head>
<body>
  <h1>2 colonnes de même hauteur</h1>
  <p>Pour les deux premières méthodes la colonne la moins haute doit être à gauche.</p>
  <h2>float:left</h2>
  <div class="conteneur la_maman_1">
    <div class="la_gauche_1">
      <p>A sed transitu piscatorios trucidarunt transitu vel cratibus parant manus.</p>
    </div>
    <div class="la_droite_1">
      <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
      <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
    </div>
  </div>
  <h2>position:absolute</h2>
  <div class="conteneur la_maman_2">
    <div class="la_gauche_2">
      <p>A sed transitu piscatorios trucidarunt transitu vel cratibus parant manus.</p>
    </div>
    <div class="la_droite_2">
      <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
      <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
    </div>
  </div>
  <h2>display:table</h2>
  <div class="conteneur la_maman_3">
    <div class="la_gauche_3">
      <p>A sed transitu piscatorios trucidarunt transitu vel cratibus parant manus.</p>
    </div>
    <div class="la_droite_3">
      <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
      <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
    </div>
  </div>
  <h2>display:flex</h2>
  <div class="conteneur la_maman_4">
    <div class="la_gauche_4">
      <p>A sed transitu piscatorios trucidarunt transitu vel cratibus parant manus.</p>
    </div>
    <div class="la_droite_4">
      <p>Quare hoc quidem praeceptum, cuiuscumque est, ad tollendam amicitiam valet; illud potius praecipiendum fuit, ut eam diligentiam adhiberemus in amicitiis comparandis, ut ne quando amare inciperemus eum, quem aliquando odisse possemus. Quin etiam si minus felices in diligendo fuissemus, ferendum id Scipio potius quam inimicitiarum tempus cogitandum putabat.</p>
      <p>Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.</p>
    </div>
  </div>
</body>
</html>

**infovect** · 06/03/2015, 08h29

Merci la deuxième méthode (absolute) est exactement ce qu'il me fallait !

Comment adapter la hauteur d'une div enfant à une div parent.

Dimensionnement en CSS

Discussions similaires

Partager

Partager