web-dev-qa-db-ja.com

オーバーフローを伴うDIV：autoおよび100％幅のテーブル

ここで誰かが私を助けてくれることを願っています。私は、可能な限りベストを尽くしてサンプルを単純化しようとしました。

私は絶対に配置されたDIVを持っています。この例では、ブラウザーウィンドウを埋めます。このdivにはoverflow：auto属性があり、コンテンツが大きすぎてDIVが表示できない場合にスクロールバーを提供します。

DIV内には、データを表示するテーブルがあり、その幅は100％です。

コンテンツが垂直方向に大きくなりすぎると、垂直スクロールバーが表示され、スクロールバーが収まるようにテーブルが水平方向にわずかに縮小します。ただし、IE7では、div内のすべてのコンテンツに対して水平方向に十分なスペースがあるにもかかわらず、水平スクロールバーも表示されます。

これはIE特定-firefoxは完全に動作します。

以下の完全なソース。どんな助けも大歓迎です。

トニー

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

03/16/10を追加...GWTのソースコードがコメントでこの質問を指していることを指摘するのは興味深いかもしれないと思った...- 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

IE7の過度の水平バーに問題がありました。 D Carterのソリューションを少し変更して使用しました

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

IE 7未満のブラウザで作業するには、以下を追加する必要があります。

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

Eran Galperinのソリューションは、単に水平スクロールをオフにしても、テーブルが垂直スクロールバーの下に重なるという事実を説明できません。これは、IEが「100％」の意味を計算してから垂直スクロールバーが必要であると判断し、利用可能な残りの水平スペースの再調整に失敗するためだと思います。

上記のcetnarの解決策は、それを釘付けしています：

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

これは、私のテストではIE6および7で正常に機能します。私が言えることから、IE6では「」ハックは実際には必要ないようです。

8
Joel Webber

さて、これは長い間私を悩ませました。 IEがスクロールバーを完全に無視できるようにするために、右側に余分なパディングがある非常に多くのデザインを作成しました。

答えは次のとおりです。2つのdivをネストし、両方にhasLayoutを指定し、内側のdivをオーバーフローに設定します。

<!-- 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
レイアウトの詳細については、こちらをご覧ください

5
D Carter

変化する：

overflow: auto;

に：

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

これは GWTトランクで修正済みと報告 です。

2
Robert Munteanu

水平スクロールを要求するのがbodyタグの場合（子要素が100％に設定されているためだと思います）、これをCSSに追加してIE7（または8互換モード）の問題を修正できます。

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

これは、条件ステートメントに同意しない限り、問題を解決するはずです。 修正IEオーバーフロー

0
Patcouch22

残念ながら、これはIEの癖です。純粋なXHTMLとCSSを使用してFirefoxと同じように動作させる方法はありません。

JavaScriptを使用してウィンドウのサイズを検出し、テーブルの幅を動的に設定できます。あなたが本当にそのルートに行きたいなら、私はそれについてさらに詳細を加えることができます。

0
Jeromy Irvine