不固定高度的滚动div

Question

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

div 应动态调整大小以适合屏幕。但如果内容不适合屏幕，它应该显示一个滚动条。因此浏览器自己的滚动条永远不需要激活。

我可以通过在 div 中放置另一个 div 并使用 overflow: auto 来让滚动条出现在该 div 中。

<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 似乎仍然忽略了 height 属性。

所以我的问题是：可以仅使用 html 来完成此操作，还是使用 javascript 来完成？

Answer 1

您可以使用绝对定位拉伸 div。这样，它将始终采用浏览器窗口（或最近的定位祖先）的大小。

鉴于此 HTML：

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

CSS 应该类似于：

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

Live Demo

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>

Answer 3

如果您尝试使元素适合屏幕，则可以将元素的高度和宽度值设置为 100%。

您还需要设置 html 和 body 的高度

html, body {height: 100%}
#gridcontaine {
   height: 100%;
   width: 100%;
 }