滚动div没有固定的高度

Question

我需要构建一个动态调整大小的滚动div.

div应动态调整大小以适应屏幕.但如果内容不适合屏幕,则应显示滚动条.因此浏览器自己的滚动条永远不需要变为活动状态.

我可以通过在其中放置另一个div并使用来获得滚动条以显示在div中overflow: auto.

<div id="gridcontainer" style="overflow:auto;height:300px; width:100px;" >
    <div id="gridcontent" style="height:100%">
    <!--Put loads of text in here-->
    </div>
</div>

麻烦的是,这仅在第一个div具有固定高度时才有效.我希望我可以设置第一个div height:100%,但遗憾的是 - 这个属性似乎被忽略了,滚动条似乎没有出现.

我已经尝试将div放在一个表中height:100%,并将第一个div设置为height:auto,希望它可以从其父级获取其高度.但div仍然似乎忽略了高度属性.

所以我的问题是:这可以使用html完成,或者 - 失败 - javascript？

Answer 1

你可以使用绝对定位拉伸div.这样,它将始终采用浏览器窗口(或最接近的位置祖先)的大小.

鉴于此HTML:

<div id="gridcontainer"></div>

CSS应该是这样的:

#gridcontainer {
  position: absolute;
  top: 0; bottom: 0; left: 0; right: 0;
  overflow: auto;
}

现场演示

Answer 2

从 IE9 开始，您可以使用视口单位。

假设容器的高度是动态的，除非它的大小大于窗口高度。在这种情况下，我们停止扩展并激活滚动。

#container{
  background: #eaeaea;
  max-height: 100vh;
  overflow-y: scroll;
}

div{
  outline: 1px solid orange;
  width: 200px;
  height: 200px;
}

<div id='container'>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>