Débordement DIV sous Firefox

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

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, 17h28

Salut,

Montre nous ton code. Merci.

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

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

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

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, 21h30

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, 21h54

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

Débordement DIV sous Firefox

HTML

Vue hybride

Discussions similaires

Partager

Partager