Question

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

第一个孩子的身高可变（因为其中的文字可以包裹，这是所希望的行为）。

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

以下是结构的简单视图：

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

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

尽管我在修修补补，但我永远无法让第二个孩子（scrolllingTable div）将自己限制在容器提供的限制之内。使用高度：100％不会填充剩余的容器高度，但会将高度设置为容器的精确高度（300px），这太多了，因为headerArea也占用了空间。

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

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

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

Answer 1

单独使用css不能这样做。你必须给滚动div一个高度才能滚动（100％或固定值）。

http://jsfiddle.net/tUrTu/

这可以通过javascript实现：

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

希望它有所帮助。

Answer 2

如果您将 scrollTable 设置为100％，它将从容器 div继承300px并转到容器 div之外，而不管您设置为 headerArea

的固定高度

您应使用Javascript动态生成高度，但要注意代码的序列必须是HTML - ＆gt; Javascript - ＆gt; CSS。

代码：

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


<script language="javascript">
var headerh = document.getElementById('headerArea').offsetHeight;
document.getElementById('scrollingTable').style.height = (300 - headerh) + 'px';
</script>

<style type="text/css">
#container {
    height: 300px;
}
#headerArea {
}
#scrollingTable {a
    overflow-y: scroll;
}
</style>

是否可以通过容器约束滚动元素的高度？

2 个答案: