没有固定高度的滚动div答案

【问题标题】：Scrolling div without fixed height没有固定高度的滚动div
【发布时间】：2011-07-30 16:25:28
【问题描述】：

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

【问题讨论】：

标签： javascript html css layout scroll

【解决方案1】：

你可以stretch the div using absolute positioning。这样，它将始终采用浏览器窗口（或最近定位的祖先）的大小。

鉴于此 HTML：

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

CSS 应该是这样的：

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

Live Demo

【讨论】：

看起来绝对定位就是答案。我很感激你:-)
@Ani 是的，它是基本的 CSS。你应该尝试一下，只是为了确定。它肯定在 IE6 及以下版本中不起作用。
为什么我要花 2 个小时才能找到这个？非常感谢。你是真正的无名英雄。
你救了我，谢谢:)
你是传奇

【解决方案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>

【讨论】：

感谢您的方法，它节省了我的时间。

【解决方案3】：

如果你想让元素适合屏幕，那么你可以将元素的高度和宽度的值设置为 100%。

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

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

【讨论】：