1 pièce(s) jointe(s)
Hauteur 100% non fonctionnelle pour un div en inline-block
Hello! :)
Je viens ici car j'ai un petit soucis qui me laisse perplexe :
Pour les besoins d'une coupe de tennis je dois faire un arbre de rencontres en html/css.
J'ai déjà bien entamé cet arbre, j'ai réussi à disposer correctement les différents éléments mais un détail n'est pas encore réglé.
J'aimerais bidouiller les bordures de certains <div></div> pour dessiner les branches de mon arbre, pour cela j'aimerais que certains de ces div prennent toute la hauteur de leur contenant (height: 100%;), seulement cela n'a aucun effet, height: 100px; fonctionne très bien par contre.
Les div à redimensionner sont en display: inline-block; .
J'aimerais comprendre pourquoi une dimension en % ne fonctionne pas alors qu'une dimension en px ne pose aucun soucis.
Quelqu'un aurait-il une explication à me proposer ou un début de solution? :)
Voici mon code, ce sont les éléments de classe "middle" que je cherche à redimensionner.
Le code HTML :
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
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
122
123
124
125
126
127
128
129
130
131
| <div class="tableau">
<div class="sons">
<div class="son-up">
<div class="sons">
<div class="son-up">
<div class="sons">
<div class="son-up">
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
<div class="son-down">
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
</div>
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
<div class="son-down">
<div class="sons">
<div class="son-up">
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
<div class="son-down">
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
</div>
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
</div>
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
<div class="son-down">
<div class="sons">
<div class="son-up">
<div class="sons">
<div class="son-up">
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
<div class="son-down">
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
</div>
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
<div class="son-down">
<div class="sons">
<div class="son-up">
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
<div class="son-down">
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
</div>
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
</div>
<div class="match">
match
</div>
<div class="middle">
middle
</div>
</div>
</div>
<div class="match">
match
</div>
</div> |
Le CSS :
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
| .tableau, .tableau *
{
border-style: solid;
border-width: 1px;
min-height: 15px;
min-width: 15px;
margin: 0px;
padding: 0px;
}
.tableau
{
width: 100%;
border-color: blue;
}
.match
{
font-size: 15px;
min-height: 30px;
min-width: 60px;
}
.tableau
{
font-size: 0;
}
.match, .middle
{
font-size: 15px;
}
.middle
{
height: 100% //cette ligne de donne rien.
}
.sons, .middle, .match
{
display: inline-block;
vertical-align: middle;
}
.son-up, .son-down
{
border-color: red;
margin: 3px;
padding: 3px;
} |
Merci d'avance! :)
EDIT :
Je m'excuse pour l'indentation qui n'est pas très bien gérée.
J'ajoute ce petit visuel de ce que j'obtiens :
Pièce jointe 151067
