Discussion :

[vmonteco]

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 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
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 :

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
.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 :

[darkstar123456]

Bonjour !

Il s'agit des bases du CSS : la hauteur en pourcentage dépend de la hauteur du parent !
Autrement dit, pour pouvoir utiliser quelque part une hauteur en %, il faut que tous les parents aient une hauteur définie (que ça soit en % ou en px).


EDIT: Voici un petit test pour démontrer ce dont je parle : http://tests.pierre-roels.com/tennis_height_100.php.
Remarquez alors que le div prend une taille de 100% du parent, donc si vous ajoutez du contenu au-dessus (comme je l'ai fait dans mon test) on a une scroll bar vu qu'on a (donc mon cas) : la hauteur du titre + 100% de la hauteur du parent (à savoir, la hauteur de la fenêtre) = scrollbar.

On voit mieux la différence avec le bloc bleu qui, lui, contient le titre et on se rend compte que la hauteur est correcte et que le résultat correspond mieux à ce que l'on souhaite

[vmonteco]

Effectivement... c'était pourtant simple. :/
Je n'avais pas défini les tailles des classes sons, son-up et son-down et j'étais en train de chercher à tort du côté des display/position sans trop comprendre.
Il ne reste qu'un léger décalage dû aux margin, padding et border à régler à présent.

Merci bien en tout cas!