IE6, DTD Strict et height:100%

**muad'dib** · 26/01/2010, 13h25

Bonjour à tous,

Derrière ce titre évocateur, se cache en fait un problème soulevé maintes et maintes fois sur les différents forums sans recevoir de réelle réponse (du moins je n'en ai pas trouvé).

Plutôt qu'un long discours, voici un petit bout de code :

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
</head>
<body>
<table border="2" cellspacing="0" cellpadding="0">
<tr>
<td>
<img src="image.jpg" style="display:block;height:200px;width:10px;" />
</td>
<td style="height:100%;">
<table border="0" cellspacing="0" cellpadding="0" style="height:100%;background-color:Lime;">
<tr>
<td style="height:100%;">
test
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

J'osais espérer que la cellule "test" s'agrandirait à la hauteur de la cellule le contenant. Cela se produit dans FF et IE7, mais pas dans IE6.

Je précise que cela ne fonctionne pas non plus en transitionnal. En enlevant la DTD et en passant au mode QUIRCKS d'IE, cela fonctionne (mais cette solution ne convient pas du tout)
Quelqu'un aurait-il la solution à ce problème svp ?

**12monkeys** · 26/01/2010, 19h06

Bonsoir

As tu essayé de fixer une hauteur à html et body ?

http://css.developpez.com/faq/?page=...ur_pourcentage

**muad'dib** · 26/01/2010, 19h22

Bonjour et merci pour la réponse

Oui j'ai déja essayé, en fait il faut renseigner la hauteur du parent direct, et ce pour chaque enfant du document html. Mais je ne veux pas spécifier pour la table la taille en pourcentage, car celle-ci peut changer selon le contenu (par exemple une ligne pourrait prendre plus de hauteur dans certains cas que d'autres).

Je remet ici un exemple de ce que je veux faire. En fait c'est une espèce de scrollbar sur la droite.

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<style>
html, body {
   margin : 0;
   padding : 0;
   height : 100%;
}
 
</style>
</head>
<body>
<table border="2" style="height:10%">
  <tr>
    <td>Ligne 1</td>
    <td id="scrollContainer" rowspan="10" style="height:100%; border:1px solid red;vertical-align:top">
    <table style="height: 100%; background-color: lime;position:relative;">
      <tr>
        <td>haut</td>
      </tr>
      <tr>
        <td style="height:100%; position:relative;">
        <div style="height:100%; position:relative;">
        <hr>
        </div>
        </td>
      </tr>
      <tr>
        <td>bas</td>
      </tr>
    </table>
   </td>
  </tr>
  <tr>
    <td>Ligne 2</td>
  </tr>
  <tr>
    <td>Ligne 3</td>
  </tr>
  <tr>
    <td>Ligne 4</td>
  </tr>
  <tr>
    <td>Ligne 5</td>
  </tr>
  <tr>
    <td>Ligne 6</td>
  </tr>
  <tr>
    <td>Ligne 7</td>
  </tr>
  <tr>
    <td>Ligne 8</td>
  </tr>
  <tr>
    <td>Ligne 9</td>
  </tr>
  <tr>
    <td>Ligne 10</td>
  </tr>
</table>
</body>
</html>

Tu vois la par exemple avec la hauteur à 10% ça se remplit presque, si je met la hauteur à 20%

Code :

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

<table border="2" style="height:20%">

Ça va se remplir complètement, mais je voudrais ne pas utiliser de "chiffre magique" comme cela, ça ne fonctionnera pas dans le cas où les données modifient la hauteur du tableau.

J'espère que je m'explique bien, c'est assez compliqué ! Et je suis entrain de m'arracher les cheveux là dessus !

**muad'dib** · 27/01/2010, 11h26

Aujourd'hui j'essaye de contourner le problème en programmant un script javascript à exécution différée afin que celui-ci récupère la taille du conteneur et l'applique à la cellule intérieure

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<script defer>
   function resizeScrollBar() {
      button = document.getElementById('vScrollButtonTop_RESULT_ASR');
      hb = button.offsetHeight;
      height = document.getElementById('scrollContainer').offsetHeight;
      dascroll = document.getElementById('vScrollBar_RESULT_ASR');
      daHeight = height - (hb * 2);
      dascroll.style.cssText = 'height: ' + daHeight + 'px;';
   }
   setTimeout("resizeScrollBar()", 2000);
</script>

Mais bon c'est vraiment "hum hum" comme solution, mais je n'ai pas d'autre idée ! Je suis toujours à la recherche d'une meilleure solution !

IE6, DTD Strict et height:100%

HTML

Discussions similaires

Partager

Partager