如何使容器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页面加载以及在“调整”事件。您可能还需要处理在回发后重新计算尺寸。