Débordement DIV sous Firefox

**Pgs** · 23/01/2013, 18h12

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

**Torgar** · 23/01/2013, 18h28

Salut,

Montre nous ton code. Merci.

**NoSmoking** · 23/01/2013, 18h49

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

**Pgs** · 23/01/2013, 19h43

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 :

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

**NoSmoking** · 23/01/2013, 22h30

je vois une accolade manquante dans ton CSS

Code css :

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

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.

**Pgs** · 23/01/2013, 22h54

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

**thelvin** · 24/01/2013, 09h41

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.

**Pgs** · 24/01/2013, 10h22

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

**thelvin** · 24/01/2013, 10h56

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.

Débordement DIV sous Firefox

HTML

Discussions similaires

Partager

Partager