web-dev-qa-db-fra.com

DIV avec débordement: automatique et une table 100% large

J'espère que quelqu'un pourrait m'aider ici. J'ai essayé de simplifier au mieux mon exemple.

J'ai un DIV absolument positionné, que pour cet exemple j'ai fait remplir la fenêtre du navigateur. Ce div a l'attribut overflow: auto pour fournir des barres de défilement lorsque le contenu est trop grand pour être affiché par le DIV.

Au sein de la DIV, j'ai un tableau pour présenter certaines données, et sa largeur est de 100%.

Lorsque le contenu devient trop grand verticalement, je m'attends à ce que la barre de défilement verticale apparaisse et que le tableau rétrécisse légèrement horizontalement pour accueillir la barre de défilement. Cependant, dans IE7, la barre de défilement horizontale apparaît également, bien qu'il y ait toujours suffisamment d'espace horizontalement pour tout le contenu de la div.

C'est IE spécifique - Firefox fonctionne parfaitement.

Source complète ci-dessous. Toute aide grandement appréciée.

Tony

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Table sizing bug?</title>
    <style>
        #maxsize
        {
            position: absolute;
            left: 5px;
            right: 5px;
            top: 5px;
            bottom: 5px;
            border: 5px solid silver;
            overflow: auto;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="maxsize">
        <p>This will be fine until such time as the vertical size forces a
           vertical scroll bar. At this point I'd expect the table to re-size
           to now take into account of the new vertical scroll bar. Instead,
           IE7 keeps the table the full size and introduces a horizontal
           scroll bar.
        </p>
        <table width="100%" cellspacing="0" cellpadding="0" border="1">
        <tbody>
            <tr>
                <td>A</td>
                <td>B</td>
                <td>C</td>
                <td>D</td>
                <td>E</td>
                <td>F</td>
                <td>G</td>
                <td>H</td>
                <td>I</td>
                <td>J</td>
                <td>K</td>
                <td>L</td>
                <td>M</td>
                <td>N</td>
                <td>O</td>
                <td>P</td>
                <td>Q</td>
                <td>R</td>
            </tr>
        </tbody>
        </table>

        <p>Resize the browser window vertically so this content doesn't
           fit any more</p>
        <p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
        <p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p><p>Hello</p>
    </div>
    </form>
</body>
</html>

ajouté 16/03/10 ... a pensé qu'il pourrait être intéressant de souligner que le code source de GWT pointe vers cette question dans un commentaire ... - http://www.google.com/codesearch/p?hl=en#MTQ26449crI/com/google/gwt/user/client/ui/ScrollPanel.Java&q=%22hack%20to%20account%20for%20the% 22% 20scrollpanel & sa = N & cd = 1 & ct = rc & l = 48

htmlinternet-explorerxhtmlhtml-table
29
Tony

J'ai eu un problème avec une barre horizontale excessive dans IE 7. J'ai utilisé la solution de D Carter légèrement modifiée

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

Pour travailler dans IE navigateur inférieur à 7, vous devez ajouter:

<!--[if lt IE 7]><style> #myDiv { overflow: auto; } </style><![endif]-->
34
cetnar

La solution d'Eran Galperin ne tient pas compte du fait que la simple désactivation du défilement horizontal permettra toujours au tableau de sous-chevaucher la barre de défilement verticale. Je suppose que c'est parce que IE calcule la signification de "100%" avant de décider qu'il a besoin d'une barre de défilement verticale, puis de ne pas réajuster pour l'espace horizontal restant disponible.

la solution de cetnar ci-dessus le cloue, cependant:

<div style="zoom: 1; overflow: auto;">
   <div id="myDiv" style="zoom: 1;">
      <table style="width: 100%">
      ...
      </table>
   </div>
</div>

Cela fonctionne correctement sur IE6 et 7 dans mes tests. D'après ce que je peux dire, le "" hack ne semble pas vraiment nécessaire sur IE6.

8
Joel Webber

D'accord, celui-ci m'a tourmenté pendant longtemps. J'ai fait beaucoup trop de designs qui ont un rembourrage supplémentaire à droite, permettant aux IE d'ignorer complètement leur propre barre de défilement.

La réponse est: imbriquez deux divisions, donnez-leur toutes les deux hasLayout, réglez celle intérieure pour qu'elle déborde.

<!-- zoom: 1 is a proprietary IE property.  It doesn't really do anything here, except give hasLayout -->

<div style="zoom: 1;">
   <div style="zoom: 1; overflow: auto">
      <table style="width: 100%"...
      ...
      </table>
   </div>
</div>

http://www.satzansatz.de/cssd/onhavinglayout.html
Allez-y pour en savoir plus sur la mise en page

5
D Carter

Changement:

overflow: auto;

à:

overflow-y:hidden;
overflow-x:auto;
5
Eran Galperin

C'est signalé corrigé dans le tronc GWT .

2
Robert Munteanu

Si c'est la balise body qui insiste pour avoir le défilement horizontal (je suppose que j'ai des éléments enfants définis à 100%), vous pouvez l'ajouter à votre CSS pour résoudre le problème dans IE7 (ou le mode de compatibilité 8):

html{overflow-x:hidden;}
1
Steve Tchorzewski

Il semble que cela devrait résoudre votre problème, tant que vous n'êtes pas opposé aux instructions conditionnelles. Correction IE débordement

0
Patcouch22

Malheureusement, c'est une bizarrerie d'IE. Il n'y a aucun moyen d'utiliser du XHTML et du CSS purs pour le faire fonctionner de la même manière que Firefox.

Vous pouvez le faire en utilisant JavaScript pour détecter la taille de la fenêtre et définir dynamiquement la largeur du tableau. Je peux ajouter plus de détails à ce sujet si vous vouliez vraiment emprunter cette voie.

0
Jeromy Irvine