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%，我的侧面板会缩小到零。我假设min-height问题与divs浮动有关，因此不在页面流中，但我没有看到一个好方法来修复它。任何解决方案？

Answer 1

我见过的每个持久解决方案都涉及Javascript，它会查看浏览器窗口的大小并更新相关div标签的大小以使其适合。

您需要处理initail页面加载以及“resize”事件。您可能还需要在回发后重新计算大小。

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

1 个答案: