30 Stimmen

DIV mit Überlauf:auto und einer 100% breiten Tabelle

Ich hoffe, dass mir hier jemand helfen kann. Ich habe versucht, mein Beispiel so gut wie möglich zu vereinfachen.

Ich habe ein absolut positioniertes DIV, das ich für dieses Beispiel das Browserfenster ausfüllen lasse. Dieses DIV hat das Attribut overflow:auto, um Bildlaufleisten bereitzustellen, wenn der Inhalt zu groß für das DIV ist, um es anzuzeigen.

Innerhalb der DIV habe ich eine Tabelle, um einige Daten zu präsentieren, und es ist Breite 100%.

Wenn der Inhalt vertikal zu groß wird, erwarte ich, dass die vertikale Bildlaufleiste erscheint und die Tabelle horizontal leicht schrumpft, um die Bildlaufleiste aufzunehmen. Im IE7 wird jedoch auch die horizontale Bildlaufleiste angezeigt, obwohl horizontal noch genügend Platz für den gesamten Inhalt des Divs vorhanden ist.

Dies ist IE-spezifisch - Firefox funktioniert perfekt.

Vollständige Quelle unten. Jede Hilfe ist sehr willkommen.

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>

hinzugefügt am 16.03.10... dachte, es könnte interessant sein, darauf hinzuweisen, dass der Quellcode von GWT in einem Kommentar auf diese Frage hinweist... 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

1voto

Wenn es der Body-Tag ist, der auf dem horizontalen Scrollen besteht (ich vermute, weil ich untergeordnete Elemente auf 100% eingestellt habe), können Sie dies zu Ihrem CSS hinzufügen, um das Problem im IE7 (oder 8 Kompatibilitätsmodus) zu beheben:

html{overflow-x:hidden;}

0voto

Patcouch22 Punkte 912

Damit dürfte Ihr Problem gelöst sein, sofern Sie keine Vorbehalte gegen Bedingungsangaben haben. IE-Überlauf beheben

0voto

Jeromy Irvine Punkte 11205

Leider ist dies eine Eigenart des IE. Es gibt keine Möglichkeit, mit reinem XHTML und CSS das Gleiche wie mit Firefox zu erreichen.

Sie könnten JavaScript verwenden, um die Größe des Fensters zu ermitteln und die Breite der Tabelle dynamisch einzustellen. Ich kann mehr Details dazu hinzufügen, wenn Sie diesen Weg wirklich gehen wollen.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X