Probleme affichage de div height 100% dans un td

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
Répondre
frognico
Arias
Messages : 5
Inscription : 21 juin 2007, 16:48

Probleme affichage de div height 100% dans un td

Message par frognico »

Bonjour,

J'ai un soucis dans firefox pour afficher des div avec une hauteur de 100% dans des cellules...elles mêmes a 100% pour que le div en fasse autant.

Voici un exemple de mon problème.

Code : Tout sélectionner

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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>
Je ne comprend pas pourquoi un des deux div s'affiche comme il faut, mais pas l'autre ?! est ce que quelqu'un pourrait m'aider :lol: ça a l'air tout simple, ça marche sous IE, mais pas sous firefox 2.0.0.4...bizarre :?

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Dernière modification par frognico le 21 juin 2007, 18:20, modifié 2 fois.
Haut
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Bonjour et bienvenue sur Geckozone cher Frognico :wink:

Déjà, il va falloir penser sérieusement à identer ton code (mettre des retours à la ligne et des espacements, si possible en tabulation), parce que là c'est totalement incompréhensible ! :?

Ensuite je ne pense pas que l'utilisation de tableaux soit judicieuse... beaucoup de code inutile pour juste de la mise en forme... en plus ce n'est pas très accessible (pour ceux qui n'utilisent pas des navigateurs graphiques) :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Haut
chinon37
Animal mythique
Messages : 5319
Inscription : 21 mars 2005, 10:17

Message par chinon37 »

un simple passage dans Kompozer a permis d'indenter le code, mais pfffou!, un mise en page par tableaux, grrrrr :evil: c'est vraiment se prendre la tête. Et pourquoi mettre des div dans les cellules?
Et pourquoi attribuer des "id" aux <div>, ces id n'ayant aucune propriété?

Que de questions...
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.
Haut
frognico
Arias
Messages : 5
Inscription : 21 juin 2007, 16:48

Message par frognico »

Merci pour votre attention,

c'est un exemple pris sur un programme plus complet, j'ai laissé les id par oubli, car j'effectue d'autres traitements sur les divs par la suite. Ils ne servent a rien dans cette exemple.

Effectivement c'etait un peu crado, sans les sauts à la ligne, c'est le copier/coller qui est le fautif ! :wink:

Le tableau semblait plus approprié, c'est pour afficher un agenda...mais si vous avez une autre solution je suis preneur, car mes divs ne veulent vraiment pas prendre toute la hauteur du td...du coup je suis bloqué dans cette configuration.

Ou, si vous savait pourquoi les divs ne passe pas a 100% je suis preneur aussi :wink:

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Haut
frognico
Arias
Messages : 5
Inscription : 21 juin 2007, 16:48

Message par frognico »

Bonjour tout le monde,

Je relance la question sur ce problème car je bloque toujours et je n'ai trouvé aucune solution pour le moment, si quelqu'un pouvait m'aider ! SVP

Je suis preneur de n'importe quelle idée pour faire avancer le chmilblic !

Merci

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Haut
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Message par calimo »

Pour un agenda, l'utilisation d'un tableau me semble raisonnable.
Ton code semble à peu près correct... tu es bien sur qu'il n'y a aucune différence ? À quoi sert le position:relative ? En as-tu vraiment besoin ?

C'est peut-être un bug... as-tu testé dans d'autres navigateurs ?

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Haut
frognico
Arias
Messages : 5
Inscription : 21 juin 2007, 16:48

Message par frognico »

Merci pour l'aide.

Oui j'ai bien testé dans Ie et tout fonctionne comme il faut, et même sous Safari pour windows...

Pour le position relative, m'est utile plus tard pour des déplacements (with ajax)...cela fonctionne dans le prog complet, j'ai juste ce problème d'affichage qui persiste dans FF.

Je pense que c'est effectivement un bug dans FF...mais je ne veux pas m'emballer.

C'est pour ça que je fais appel à vous...au cas ou une solution existerait

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Haut
frognico
Arias
Messages : 5
Inscription : 21 juin 2007, 16:48

Message par frognico »

Bon...je pense qu'il n'y a pas réellement de solution pour ce problème :cry: tant pis...je crois que je vais laisser tomber.
Merci quand même pour l'aide
A+

Message envoyé avec : Mozilla/5.0 (Windows; U; Windows NT 5.1; fr; rv:1.8.1.4) Gecko/20070515 Firefox/2.0.0.4
Haut
Répondre

Revenir à « Développement web »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités