[Internet Explorer] DIV height 100% in TABLE->TD

Kalstone

Kalstone

Grünschnabel
Hallo zusammen,

ich benötige innerhalb einer Tabellenzelle ein Scrollbares DIV mit Höhe 100% der Tabellenzeile. Das angefügte HTML ist valide und funktioniert im FF, Safari und Chrome wie erwartet. Wird das Browserfenster zu klein, scrollt das entsprechende DIV. Wer wieder rumzickt, ist der Intert Explorer - hier klappt das nicht annähernd. Wichtig ist eine Lösung ohne JavaScript. Über das Layouting mit Tabellen lässt sich streiten, da es aber noch etliche andere Abhängigkeiten zu Größen und Positinen gibt, scheint mir das am sinnvollsten.

Das HTML kann zum Testen AS-IS übernommen werden.
HTML: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Table Sample</title>
<style type="text/css">
html,body,form {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

table.full-height {
    height: 100%;
    width: 100%;
}
</style>
</head>
<body>
    <table class="full-height">
        <tr style="height: 30px; background-color: #DEDEDE;">
            <td>
                TOP
            </td>
        </tr>
        <tr style="background-color: silver;">
            <td>
                <table style="height: 100%; width: 100%;">
                    <tr style="height: 30px">
                        <td style="width: 200px;">HEADER LEFT</td>
                        <td>HEADER RIGHT</td>
                    </tr>
                    <tr style="height: auto; vertical-align: top;">
                        <td style="background-color: #A0A0A0;">CONTENT LEFT</td>
                        <td style="height: 100%; background-color: #A0A0A0;">
                            <div style="position: relative; height: 100%;">
                                <div style="border-bottom: 2px dotted silver; position: absolute; height: 100%; width:100%; overflow-y: scroll; max-height: 322px;">
                                    <table style="height: 100%; width: 100%; background-color: gray;">
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                        <tr style="height: 30px">
                                            <td>CONTENT ROW</td>
                                        </tr>
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr style="height: 30px; background-color: #DEDEDE;">
            <td>
                BOTTOM
            </td>
        </tr>
    </table>
</body>
</html>

Wer Ideen oder Lösungen hat, immer her damit ;).

Danke + LG, Kalstone
 
Welche IE-Version?

IE7 und IE8 erwarten zusätzlich für dieses <td> in Zeile 27 height:100%:

HTML: 
 <tr style="background-color: silver;">
            <td style="height: 100%;">
 
Hallo spicelab,

danke für den Hinweis, das geht schon in die richtige Richtung. Allerdings sieht es so aus, als würden sich die 100% jetzt auf die Höhe der gesamten Tablle beziehen, sodass die umgebende Tabelle zu groß wird und nach unten "rausrutscht" (Scrollbars für den Body). Ich habe noch die Höhenangabe für die Tabelle in Zeile 38 rausgenommen, damit die nicht gestreckt wird.
Es funktioniert nachwievor in den anderen Browsern, nur die Gesamthöhe passt im IE noch nicht.

Gruß, Kalstone
 
Hi spicelab,

danke erstmal für die ganzen Tips. Mit CSS-Layout hab ich auch schon versucht - das Problem ist, dass das "Grundgerüst" mehr oder weniger vollkommen dynamisch erzeugt wird (eine JSF-Komponente, welche das HTML rausrendert). Dadurch weiss ich nie wirklich wie hoch die erste Zeile ist, was aber für die absolute Positionierung der DIVs in 2. Reihe notwendig ist. Das gleiche wiederholt sich bei der Positionierung der 2. Spalte, da die Breite der 1. Spalte variieren kann. - Alles irgendwie nicht so einfach, wie ich mir das gedacht habe ;) -

Gruß, Kalstone
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück