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 ：overflow = auto对div意味着滚动在需要之前是不可见的，因此它们应该可以工作。但只是为了确保我已经尝试过overflow = scroll，以及许多其他的东西。我没有看到设置doctype将如何改变这种情况。

Ettiene ：将div设置为高度= 100％，然后在其中放入另一个div并设置其高度= 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>

桌面上的overflow: auto和display: block适用于Firefox等。 div上的overflow: auto适用于IE。

Answer 2

<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 parent height get。

Answer 3

要滚动内容，您需要使用overflow:scroll;

还要确保使用doctype。

Answer 4

我认为至少有一个容器元素，即表格或div应该设置高于％的高度值。对于高度为100％的东西，内容是什么时候太多了？

Answer 5

您可以尝试'min-height'，但这不适用于IE。 ; - ）

一般情况下，我建议避免使用100％高度div。

查看问题Div 100% height works on Firefox but not in IE，它有类似的问题。

Answer 6

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

Answer 7

不确定我做错了，但在表格height上使用<div>的百分比似乎完全被忽略了。无论％如何，行为都是一致的。我只设法缩小div，并以像素为单位指定height。

而BTW，doctype指定了boxmodel，它可能会影响这种情况的处理方式（但我不认为这样做）。（阅读更多：http://www.quirksmode.org/css/quirksmode.html）

Answer 8

我能够使用嵌套表来处理当前项目。 Google地球插件位于需要填充整个屏幕并相应调整大小的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中的项目来说，效果非常好。

制作一个高度= 100％的表格，以正确包含高度= 100％的div

8 个答案: