Hauteur de DIV 100% dans TD impossible dans firefox

**frognico** · 19/06/2007, 18h42

Bonjour,

Bon je tourne en rond depuis trop longtemps, j'ai fait pas mal de topic, mais je ne trouve jamais la solution à mon problème.

Je n'arrive pas a faire prendre toute la hauteur de la cellule (qui est un rowspan) à un DIV. Même avec un style heigh 100% dans le div, ça veut pas, il reste a une hauteur minimum.

je suis obligé de passer pas des div et de garder le tableau. C'est un agenda avec des rowspan assez fréquents.

Je sais qu'en mettant une hauteur fixe identique sur le div et sur le td, ça marche, mais dans mon cas, je ne connais pas la hauteur de la cellule à l'avance, et il peux y avoir plusieurs div dans ce td.

il faudrait que je puisse trouver quelque chose qui force le div à prendre toute la hauteur disponible dans la cellule.

Voici un exemple du problème pour un div dans un td (même ça, ça ne marche pas

) :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
html, body{
   height:100%;
}
</style>
</head>
<body>
<table width="50%" border="1" height="64">
  <tr>
    <td height="18">&nbsp;</td>
    <td height="100%" rowspan="3">
	<div id="test" style="background-color:#00CCFF">&nbsp;1&nbsp;</div>
	<div id="test" style="background-color:#33CC99">&nbsp;2&nbsp;</div>
	<div id="test" style="background-color:#99FF66">&nbsp;3&nbsp;</div>
	<div id="test" style="background-color:#333399;height:100%;">&nbsp;4&nbsp;</div>
	</td>
    <td height="18">&nbsp;</td>
  </tr>
  <tr>
    <td height="18">&nbsp;</td>
    <td height="18">&nbsp;</td>
  </tr>
  <tr>
    <td height="18">&nbsp;</td>
    <td height="18">&nbsp;</td>
  </tr>
</table>
 
</body>
</html>

Je suis preneur de n'importe quelle solution, je commence à avoir envie d'apprendre à voler a mon pc...c'est pas bon ça.

Merci à tous...et désolé si le problème à déjà été posé

**Bisûnûrs** · 19/06/2007, 18h53

Ben le seul élément qui n'a pas de hauteur définie est l'élément parent de ton div ... Alors rajoute lui une.

**frognico** · 19/06/2007, 20h01

Merci pour l'info, c'est corrigé, ne connaissant pas la hauteur finale du td, je lui ai mis une valeur de 100% et ça marche comme il faut, mais maintenant lorsqu'il y a tros de <div> dans le td rowspan, le dernier div dépasse du td. Y aurait il un moyen de pousser la cellule plutot que de passer par dessus ?

Je précise que les div sont en "position:relative;top:0;left:0"

Merci !

Edit : j'ai mis a jour le code de l'exemple.

Edit2 : j'ai essayé d'enlever le 100% du dernier div et cela fonctionne, mais dans mon vrai programme, le dernier div est toujours à 100%,pour qu'il prenne toute la hauteur du td, je peux difficilement prévoir quand il faut l'enlever

, mais s'il suffit de mettre un overflow ou quelque chose pour que le td bouge avec le div, c'est tout bon, mais je ne sais pas quoi...

**frognico** · 20/06/2007, 16h05

Bonjour,

ça marche toujours pas au top...voici le code de mon problème, ça sera toujours plus parlant...si quelqu'un est capable de m'expliquer pourquoi seulement le 2e div à droite prend toute la hauteur, je suis preneur.

J'aimerais que les 2 soient identiques et prennent tout le td.

pour info je suis en firefox v2.0.0.4

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
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
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">
<html>
<head>
<style>
TD.bordTLRB {
  BORDER: solid 1px #346AA6;
}
</style>
</head>
<body>
  <p>&nbsp;</p>
  <table width="600" border="0" align="center" cellpadding="0" cellspacing="0" height="400px">
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td rowspan="15" valign="top" class="bordTLRB" height="100%"><div valign="top" id="div" style="padding: 0px; background-color: orange; cursor: move; position: relative; top: 0px; left: 0px; height: 100%;" align="left">TEST2</div></td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td rowspan="15" valign="top" class="bordTLRB" height="100%"><div valign="top" id="div2" style="padding: 0px; background-color: orange; cursor: move; position: relative; top: 0px; left: 0px; height: 100%;" align="left">TEST1</div></td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
    <tr>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
      <td class="bordTLRB">&nbsp;</td>
    </tr>
  </table>
  <p>&nbsp;    </p>
  </body>
  </html>

c'est à se taper la tête contre le clavier !!!

**Candygirl** · 20/06/2007, 16h14

Hello,

Je constate que tu as changé de doctype est que tu es passé en html 4.0 sans url:

Code :

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

<!DOCTYPE html PUBLIC "-//w3c//dtd html 4.0 transitional//en">

Outre le fait que le html 4.0 soit obsolète, tu vas te retrouver avec tous les navigateurs en mode quirks et donc ton code interprété au bon vouloir du navigateur plutôt que selon les recommandations du w3c.

Je te conseille donc d'adopter un doctype d'actualité et valide afin que tous les navigateurs récents soient en mode standard.

Si tu comptes faire de la mise en page par le biais de ton tableau, et non pas présenter des données tabulaires, je ne peux que t'encourager à adopter une présentation à l'aide des css et exempte de tableau.

**frognico** · 20/06/2007, 16h44

Merci pour les infos, j'ai changer le doctype, mais pas de changement flagrant sur l'affichage.

Qu'entends tu par "présentation à l'aide des css et exempte de tableau.", car je ne pense pas pouvoir recoder toute la présentation pour supprimer les tableaux.

Tu me conseilles de passer par des divs+css sans tableau ???

Il n'y a pas moyen de faire prendre toute la hauteur des div dans les td ???

**frognico** · 20/06/2007, 19h46

Un bug sous firefox ??? j'ai beau essayer pas mal de combinaisons, je ne comprend pas ...par contre, quand je met les 2 div dans des td rowspan au même niveau (sur le même tr) hop les 2 div prennent 100% de chaque td comme par magie

Je fais encore appel a vos connaissances, pour me donner un coup de main, pour solutionner ou contourner ce problème, un css magique ou un truc vaudou...moi j'abandonne

( <- trop tapé sur le clavier avec la tête)

**frognico** · 27/06/2007, 08h47

Bonjour tout le monde,

Je relance un peu la question car je bloque toujours sur ce problème, est ce que quelqu'un a une solution depuis ? SVP ?

Merci

**frognico** · 03/07/2007, 17h34

Bon...je pense qu'il n'y a pas réellement de solution pour ce problème

tant pis...je crois que je vais laisser tomber.
Merci quand même pour l'aide
A+

Hauteur de DIV 100% dans TD impossible dans firefox

Dimensionnement en CSS

Discussions similaires

Partager

Partager