没有固定高度的滚动div

Question

我需要构建一个动态调整大小的滚动 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;
}

现场演示

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%;
 }