html - 制作一个 height=100% 的表格以正确包含一个 height=100% 的 div

Question

我有一张高度为 100% 且位置固定的 table 。在其中我想要一个高度为 100% 的 div，它可以在溢出时滚动。

问题是，如果我在 div 中放置的内容超过其高度所能承受的范围，表格就会开始表现得很奇怪。

滚动条没有按预期显示，而是表格变得比屏幕大。

请相信我的话，我确实需要将 div 放在表格中；这是出于布局目的，我没有费心用它来弄脏我的问题描述。

但这是我唯一的限制:最外层的元素需要是一个表格，而在其中的某处我想要 div。如果您有将 div 嵌入其他元素的建议，请告诉我!

但我希望你的建议至少在 firefox 中有预期的结果。

再澄清一次:我想要的结果是，如果 div 包含的内容超过其高度，那么滚动条应该出现，而外表保持不变。

我在这里给你代码，你可以测试一下。

<table style='position: fixed; left: 0px; top: 0px; height: 100%;'>
  <tr><td style='height: 100%;'>
    <div style='height: 100%; overflow: auto;'>
      FRODO!
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
    </div>
  </td></tr>
</table>

谢谢大家!

编辑:回应您的回答。

Valamo:div 上的 overflow=auto 意味着滚动条在需要时才可见，因此它们应该可以工作。但为了确保我已经尝试过 overflow=scroll 以及许多其他东西。我看不出设置文档类型会如何改变这种情况。

Ettiene:将一个div设置为height=100%，然后在其中放入另一个div，并设置其height=100%和overflow=auto，那么我对内部div没有问题；当它的内容太多时，它会显示滚动条，而外部 div 保持不变。但是如果你用表格替换外部 div 那么你就会遇到问题。因此仅仅将元素高度设置为 100% 不是问题。

还有什么想法吗？ :-)

Answer 1

向您的原始示例添加了一些 CSS:

<table style='position: fixed; left: 0px; top: 0px; height: 100%; display: block; overflow: auto; position: fixed;'>
  <tr><td style='height: 100%; padding: 0 1.5em;'>
    <div style='height: 100%; overflow: auto;'>
      FRODO!
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
      ...
    </div>
  </td></tr>
</table>

table 上的 overflow: auto 和 display: block 是为 Firefox 等人准备的。 div 上的 overflow: auto 适用于 IE。