html - 是否可以通过容器来限制滚动元素的高度？

Question

我有一个包含高度和宽度受限的 div。它有 2 个子元素。

第一个 child 的高度可以是可变的(因为其中的文本可以换行，这是期望的行为)。

第二个 child 是一个包装表格的 div。 div 设置为 overflow-y: scroll，因此它意味着填充其容器的剩余高度，并在它不完全适合时为其内部表的其余部分提供滚动。

这是结构的简单 View :

<div id="container" style="height:300px; width:200px">
  <div id="headerArea">
    ...
  </div>

  <div id="scrollingTable" style="overflow-y:scroll">
    <table>
      ...
    </table>
  </div>
</div>

尽管我进行了修补，但我永远无法让第二个子元素 scrollingTable div 将自身限制在容器提供的限制范围内。使用 height:100% 不会填充剩余的容器高度，而是将高度设置为容器的确切高度(300px)，这太多了，因为 headerArea 也占用了空间。

如果 headerArea 的高度是固定的，我可以将滚动表的大小指定为 300 - heightOfHeaderArea，但如上所述，headerArea 的高度不是固定的。

我可能不得不使用 JQuery 将 scrollingTable 的大小调整到指定的高度，但我很好奇是否有纯 css 解决方案。

任何建议，或者如果不固定 headerArea 的高度这是不可能的？

Answer 1

你不能单独使用 css 来做到这一点。您必须为滚动的 div 指定一个高度才能滚动(100% 或固定值)。

http://jsfiddle.net/tUrTu/

这可以通过 javascript 实现:

http://jsfiddle.net/tUrTu/2/

希望对您有所帮助。