javascript 滚动没有固定高度的div

eaf3rand 于 2023-04-10 发布在 Java

关注(0)|答案(3)|浏览(132)

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

JavaScript

来源：https://stackoverflow.com/questions/5564455/scrolling-div-without-fixed-height

3条答案

按热度按时间

cqoc49vn1#

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

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

CSS应该类似于：

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

Live Demo

赞(0）回复(0）举报 2023-04-10

k3bvogb12#

从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>

赞(0）回复(0）举报 2023-04-10

bpzcxfmw3#

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

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

赞(0）回复(0）举报 2023-04-10

我来回答

javascript 滚动没有固定高度的div

3条答案

相关问题

热门标签

最新问答