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

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

Answer 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

Answer 2

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

假设您的容器高度是动态的，除非它的大小比窗户高度大。在那种情况下，我们停止扩张＆amp;激活滚动。

#container{
  background: #eaeaea;
  max-height: 100vh;
  overflow-y: scroll;
}

.parent div{
  outline: 1px solid orange;
  width: 200px;
  height: 200px;
  float:left;
}

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

滚动div没有固定的高度

3 个答案: