Wie lässt sich ein Container vertikal in eine IE-Tabelle einordnen?

Question

Ich habe Probleme mit einem ziemlich einfachen dreispaltigen Layout, wo es ein Container-Div gibt, das mehrere andere Divs enthält, von denen einige grundsätzlich für das Design vorhanden sind, von denen das Haupt eine Tabelle enthält. So ist die relevante Quelle sieht ein bisschen wie folgt aus:

<div id="wrapper"> 
    <div id="left-side-decoration">&nbsp;</div> 
    <div id="right-side-decoration">&nbsp;</div> 
    <div id="content"> 
    <table id="datatable"> 
     <thead><th>Title</th></thead> 
     <tr><td>Content Row 1</td></tr> 
     <tr><td>Content Row 2</td></tr> 
     <tr><td>Content Row 3</td></tr> 
    </table> 
    </div> 
    <div id="footer-decoration"> 
</div> 

Für das Design muss ich sein, zumindest die Höhe des Browserfensters die Gesamthöhe zu arbeiten. So habe ich ein Stylesheet, das funktioniert wie folgt:

#wrapper 
    { 
    height: 100%; 
    } 
#left-side-decoration 
    { 
     float: left; 
     height: 100%; 
     width: 154px; 
     background-color: red; 
    } 
#right-side-decoration 
    { 
     float: right; 
     width: 1em; 
     height: 100%; 
     background-color: red; 
    } 
#content 
    { 
    height: 100%; 
    border: 1px solid #6f9dd9; 
    margin-left: 154px; 
    margin-right: 1em; 
    } 
#footer-decoration 
    { 
    height: 3em; 
    clear: both; 
    background-color: green; 
    } 

Jetzt funktioniert dies aus in Firefox und oft in IE, aber datatable kann größer als die Höhe des Browserfensters bekommen. Wenn das geschieht, verschwindet es unter dem footer-decoration div und wird für Internet Explorer-Benutzer darunter wieder angezeigt.

Ich habe versucht, die Überlaufeinstellungen zu ändern, aber ich möchte nicht den Inhalt am unteren Rand der Seite verlieren oder eine Bildlaufleiste haben, was ich wirklich will ist für die Seite mindestens die Höhe von das Browserfenster aber vielleicht etwas größer. Die offensichtliche Sache dafür wäre, min-height zu verwenden, aber wenn ich die Höhe des Wrappers ändere, um zu verwenden, dass beide left-side-decoration und right-side-decoration auf ein paar Pixel hoch zusammenschrumpfen und keine 100% Höhe oder 100% Min-Höhe zu verwenden scheint sich zu ändern es.

Also wenn ich height: 100% verwende, fällt meine Tabelle aus dem unteren Rand der Seite in IE, wenn ich min-height: 100% meine Seitenverkleidungen verwenden schrumpft zu nichts. Ich gehe davon aus, dass das Problem der minimalen Höhe mit dem Floating der divs zusammenhängt und so außerhalb des Seitenflusses liegt, aber ich sehe keinen guten Weg, es zu beheben. Irgendwelche Lösungen?

Answer 1

Jede dauerhafte Lösung, die ich gesehen habe, bezieht Javascript mit ein, das die Größe des Browserfensters überwacht und die Größe der relevanten div Tags aktualisiert, um richtig zu passen.

Sie müssen sowohl die initail-Seitenladung als auch das "resize" -Ereignis verarbeiten. Möglicherweise müssen Sie sich auch mit der Neuberechnung der Größen nach Postbacks beschäftigen.