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



## Kalstone (14. September 2010)

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.

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


----------



## SpiceLab (14. September 2010)

Welche IE-Version?

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


```
<tr style="background-color: silver;">
            <td style="height: 100%;">
```


----------



## Kalstone (14. September 2010)

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


----------



## SpiceLab (14. September 2010)

Dann wirst du vermutlich dein "Tabellenkonstrukt" umbauen müssen, wie beispielsweise in diesen drei Themen aus der Vergangenheit geschehen:


Tabelle unterschiedlich in IE und Firefox
Tabellen rowspan Problem mit IE
Problem mit Tabelle

Oder besser gleich ein CSS-gestütztes Layout umsetzen: 


Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken


----------



## SpiceLab (15. September 2010)

spicelab hat gesagt.:


> Oder besser gleich ein CSS-gestütztes Layout umsetzen:
> 
> 
> Tabellenloses Basislayout mit fixierten und separat scrollbaren Blöcken


Passend dazu empfehle ich dir das Vorlagenbeispiel http://www.cssplay.co.uk/layouts/body4.html, das deinen Vorstellungen entgegenkommen dürfte.


----------



## Kalstone (15. September 2010)

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


----------

