IE7 DIV 扩展以适应 TABLE，忽略 HEIGHT% 指令答案

【问题标题】：IE7 DIV expands to fit TABLE, ignoring HEIGHT% directiveIE7 DIV 扩展以适应 TABLE，忽略 HEIGHT% 指令
【发布时间】：2011-01-27 02:58:45
【问题描述】：

非常感谢帮助我在 IE7 中滚动固定标题表。

在 IE7 中，我的高数据表强制其包含的 DIV 垂直扩展，并阻止显示该 DIV 的滚动条。我正在使用优秀的跨浏览器（包括 IE7）滚动、固定标题表格布局解决方案： http://www.sitepoint.com/forums/showthread.php?t=615364&page=3 ，但我已对其进行了修改，以便表格填满页面。

这是在实践中的样子：

<style>
html, body { width: 100%; height: 100%; padding: 0; margin: 0; }
#results { position: absolute; top: 2em; bottom: 0; width: 100%; }
#results div { width: 100%; height: 100%; overflow: auto; overflow-x: hidden; }
#results table { width: 100%; }
#results table th p { position: absolute; top: -2em; }
</style>
<body>
  <div id='results'> <!-- provides position referece to headers -->
    <div>            <!-- scrolls the table it contains -->
      <table>        <!-- incorrectly expands parent div in IE7 -->
        <tr><th><p>FIXED-HEADER HERE</p></th></tr>
        <tr><td>TALL CONTENT HERE</td></tr>
      </table>
    </div>
  </div>
</body>

我对 FF 和 IE8 中标题和滚动的工作方式感到满意。 IE7 中的调试工具包显示#results 具有所需的高度，但 DIV 和 TABLE 共享相同的极高值，其中 DIV 实际上应该是#results 的高度。如果我将 DIV 高度从 % 更改为 px 单位，它会滚动，但当然不再正确调整大小。

我正在使用严格的文档类型。我的表实际上包含表格数据，通常是 10 列和 200 行，因此表在语义上是准确的。当然，这张表实际上还有更多内容。

我不希望将 javascript 用于动态尺寸，除非它是如此简单以至于它是防弹的，因为我总是会遇到愚蠢的缺陷（哦，是的，当你悬停时我没想到重新评估尺寸超链接和行高变化等）。

谢谢你，香农

【问题讨论】：

我认为您需要将 height 值分配给 div#results。
@jnpcl 谢谢。根据 CSS 规则，设置顶部和底部应该定义高度。这不会阻止我指定它来满足 IE7，所以在你的建议下，我尝试明确设置 height: auto，但它没有帮助。我无法指定 %，因为我不希望我的表头在调整浏览器窗口高度大小时变得小于它包含的文本。

标签： html css internet-explorer-7 height

【解决方案1】：

通过将 DIV（同时保留现有样式规则）包装在：

<div style="position: absolute; height: 100%; width: 100%;" } ></div>

问题已解决。 IE7内部再次罢工。可能有一种更优雅的方法来解决它，不需要更多的结构标记，如果你知道的话，我很想听听。

香农

【讨论】：

您将其应用于哪个 div？ '}' 是故意的吗？