Débordement DIV sous Firefox

Version imprimable

23/01/2013, 17h12
Pgs

Débordement DIV sous Firefox

Bonjour,

Je gère les zones de ma page à travers des tableaux.
* J'ai un tableau principal qui contient 3 <tr><td><div></div></td></tr>
* La hauteur des <td> est définie en pourcentage
* La hauteur des <div> est 100%.

Sous IE, la page est toujours parfaite.
Si un <div> est grand, son scroll se met en marche et les <td> conservent leur taille respective.

Sous Firefox, si un <div> est grand :
* il ne se met pas en mode scroll,
* il déborde du <td> dans lequel il se trouve,
* il prend toute la page.

Je n'arrive pas, sous Firefox, à le contraindre dans le <td> auquel il appartient.

Merci pour toute aide.

Philippe
23/01/2013, 17h28
Torgar

Salut,

Montre nous ton code. Merci.
23/01/2013, 17h49
NoSmoking

Bonjour,
cela sens le DOCTYPE "approximatif", mais pourquoi mettre des DIVs dans les TD?..

Bonjour,

a) J'ai positionné des <div> pour ensuite les remplir, en fonction de mes besoins, par des tableaux de données (avec la méthode innerHTML).

b) Voici mon code (je sais que vous allez dire que ce n'est pas très propre. Mais, à part le problème évoqué dans cette discussion, il fonctionne correctement).

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
 
body{height:100%;overflow:hidden;}
table.x{height:100%;overflow:hidden;
tr.x1{height:50pt;overflow:hidden;}
td.x1{width:100%;height:50pt;}
tr.x2{height:100%;overflow:hidden;}
td.x2{width:100%;height:100%;}
div.x1{width:100%;height:100%;overflow-x:hidden;overflow-y:scroll;}
div.x2{width:100%;height:100%;overflow:scroll;}
<BODY>
<table class="x">
    <tr class="x2" style="">
        <td class="x2" style="height:30%;">
            <table class="x">
                <tr class="x1">
                    <td class="x1">
                        <div id="div1" class="x1">
                        </div>
                    </td>
                </tr>
                <tr class="x2">
                    <td class="x2">
                        <div id="div2" class="x2">
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
    <tr class="x2" style="">
        <td class="x2" style="height:30%;">
            <table class="x">
                <tr class="x1">
                    <td class="x1">
                        <div id="div3" class="x1">
                        </div>
                    </td>
                </tr>
                <tr class="x2">
                    <td class="x2">
                        <div id="div4" class="x2">
                        </div>
                    </td>
                </tr>
            </table>
        </td>
    </tr>
</table>
</body>

23/01/2013, 21h30
NoSmoking

je vois une accolade manquante dans ton CSS

Code:

table.x{height:100%;overflow:hidden;

Pourquoi ne pas utiliser des DIVs autonomes pour faire ta mise en page, dans le cas que tu montres les TABLEs ne sont pas indispensable, cela allégerait pas mal la structure.
23/01/2013, 21h54
Pgs

Merci,

J'ai coupé, dans le code envoyé, des styles qui ne sont pas utilisés dans mon exemple. En faisant cela, j'ai coupé l'accolade. Mais elle figure bien dans mon code.

Bien noté ta remarque concernant les DIVs autonomes.

Malgré tout, je voudrais comprendre pourquoi, sous Firefox, la hauteur de mon DIV n'est pas bloquée par celle du TD qui le contient :
* si j'affecte au DIV une hauteur en points, c'est OK.
* si je lui affecte une hauteur de 100%, il n'est plus, sous Firefox, bloqué à la hauteur du TD (alors qu'il reste bloqué à cette hauteur, sous IE).

Philippe
24/01/2013, 08h41
thelvin

En résumé, c'est parce que les hauteurs de cellule ou de rangée de tableau, n'ont pas de sens en pourcentage dans CSS 2.1.

Là tu indiques une (des !) hauteur(s) de 100%... Mais tu as plus d'une rangée ! C'est impossible. Et comme les concepteurs de CSS l'ont vu venir gros comme une maison, ils ont dit que CSS 2.1 ne gérait pas les hauteurs en pourcentage dans ce cas-là.

Raison pour laquelle utiliser autre chose qu'un tableau pourrait te faire avancer. Tout comme éviter de définir un contenu occupant 200% + 100pt de la hauteur de son contenant.
24/01/2013, 09h22
Pgs

Merci beaucoup,

Mais j'ai l'impression qu'IE accepte le pourcentage et prend comme base du pourcentage la taille du conteneur. 100% semble interprété comme 100% de la taille du conteneur.

Dans mon tableau, les DIV sont tous déclarés à 100% et prennent la taille de leur conteneur.

Et il semble aussi que si le total des % des lignes d'un tableau dépasse 100, IE s'en arrange.

Tout cela serait donc du à un comportement particulier d'IE ?

Merci encore
24/01/2013, 09h56
thelvin

Citation:

Envoyé par Pgs

Et il semble aussi que si le total des % des lignes d'un tableau dépasse 100, IE s'en arrange.

Tout cela serait donc du à un comportement particulier d'IE ?

Oui. Ce comportement ne me semble pas spécialement con, mais totalement incohérent vis-à-vis de la hauteur de tout ce qui n'est pas une cellule ou une rangée de tableau.