创建一个高度为100%的表格以适当地包含一个高度为100%的div。

Question

我有一个高度为100%并具有固定位置的表格。在其中，我想要一个高度为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和其他许多方法。我不明白设置doctype如何改变情况。

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

还有更多的想法吗？ :-)

- Arash

---

我选择将这段话写成评论，而不是让我的问题变得更加冗长：首先，感谢您的回答，但我还没有时间尝试您的建议。最初我收到了两个无效的建议，然后似乎没有其他人有更多的话要说。但是，一旦这篇文章失去了我的注意力，你们中的更多人给出了新的建议！ :-) 这就是为什么我有点缺席。但很快我会评估你们的建议并选择最好的。如果这个小评论把我的帖子推到了前面，我很抱歉。 - Arash

Answer 1

<table style="position: absolute;width: 100%;height: 100%;">
  <tr>
     <td >
        <div style="height: 100%;postion:relative">
        Testing Charactors
        </div>
    </td>
 </tr>
</table>

使用position:relative CSS属性获取父元素的高度。

- user6314898

Answer 2

在您的原始示例中添加了一些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>

overflow: auto 和 display: block 在表格上是为了 Firefox 等浏览器。在 div 上的 overflow: auto 是为了 IE。

- DaveS

Answer 3

在当前项目中，我能够使用嵌套表格使其正常工作。Google Earth插件位于一个需要填满整个屏幕并相应地调整大小的div中。我为所有涉及的嵌套表格和单元格设置了ID，并在调整大小时设置了它们的高度：

$(function() {
    $(window).resize(function() {
        $('#main_table').height($(window).height() - $('#main_table').offset().top);
        $('#main_td').height($(window).height() - $('#main_td').offset().top);
        $('#main_table2').height($(window).height() - $('#main_table2').offset().top);
        $('#main_td2').height($(window).height() - $('#main_td2').offset().top);
        $('#map_canvas').height($(window).height() - $('#map_canvas').offset().top);
    });
    $(window).resize();
});

在IE8和Chrome中，它的工作表现足够好，超出了我的项目需求。

- Fosco

Answer 4

我不确定我是否做错了，但是在表格中使用百分比作为<div>的height似乎完全被忽略了。无论百分比如何，行为都是一致的。我只能通过指定像素值的height来缩小div。

顺便说一句，doctype指定了boxmodel，这可能会影响处理此情况的方式（但我认为它并没有）。 （阅读更多：http://www.quirksmode.org/css/quirksmode.html）

- kb.

Answer 5

要使内容滚动，您需要使用 overflow:scroll; 另外请确保使用文档类型声明。

- Tor Valamo

---

友好提示：我在我的原始问题中回答了您的答案。 :-) - Arash

Answer 6

我认为你的容器元素之一，即表格或 div 应该设置一个高度值，而不是以百分比为单位。当内容超出 100% 的高度时，应该怎么办？

- Ettiene Grobler

---

友好提示：我在我的原始问题中回复了您的答案。 :-) - Arash

Answer 7

你可以尝试使用'min-height'，但这在IE上不起作用。 ;-)

一般来说，我建议避免使用100%高度的div。

看一下类似问题Div 100% height works on Firefox but not in IE，可能会有所帮助。

- Synox

Answer 8

你可以尝试使用min-height，在IE中使用!important hack。

- MRAISKY