如何使容器div垂直拉伸以適應IE中的表格？

Question

我遇到了一個相當簡單的三列布局的問題，其中有一個容器div包含其他幾個div，其中一些基本上是爲設計而存在的，其中主要包含一個表格。因此，有關人士看起來有點像這樣：

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

對於設計工作，我需要的總高度是瀏覽器窗口的至少高度。所以我有一個是這樣的一個樣式表：

#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; 
    } 

現在這個工作了罰款的Firefox和經常在IE，但datatable可以獲得比瀏覽器窗口的高度更高。當發生這種情況時，它會在footer-decoration div之下消失，並在Internet Explorer用戶的下面再次出現。

我試圖改變溢出設置，但我不希望在頁面的底部失去內容還是有滾動條，是我真正想要的是頁面是至少的高度瀏覽器窗口但可能有點高。其明顯的事情是使用min-height但是當我改變包裝的高度最小高度似乎改變使用這兩個left-side-decoration和right-side-decoration縮小到幾個像素高，既不用100％的高度或100％它。

因此，如果我使用height: 100%我的桌子掉在IE頁面的底部，如果我使用min-height: 100%我的側面板收縮到沒有。我認爲最小高度問題與浮動div相關，因此不在頁面流中，但我沒有看到解決此問題的好方法。任何解決方案

Answer 1

每一個持久的解決辦法我已經看到了，這涉及的Javascript，將觀看瀏覽器窗口的大小和更新相關的div標籤的大小，以適合正常。

您將需要處理initail頁面加載以及在「調整」事件。您可能還需要處理在回發後重新計算尺寸。