html – 在div中设置一个div来滚动,而父级不滚动

前端之家收集整理的这篇文章主要介绍了html – 在div中设置一个div来滚动,而父级不滚动前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个容器div,它拥有许多子div。我的容器中的一个div有评论。我没有将整个div设置为滚动,而是希望所有内容保持原位,只留下注释div来滚动。我已经尝试将父溢出设置为隐藏,并将注释div设置为滚动,并且滚动条实际显示页面上但它被禁用。有谁知道我怎么能做到这一点?

CSS

#container
{                
   position: absolute; 
   overflow: hidden; 
}

#comments
{
   position: relative;
   overflow: scroll; 
}

HTML

<div id="container">
   <div id="comments">
      this is what I want to scroll
   </div>
</div>

我无法摆脱容器,因为它包含更多的子元素。我只是希望其他所有内容保持静态,而只有注释可以滚动。

解决方法

您需要在“comments”div上设置特定高度,以确保它确切知道何时滚动。如果没有足够的内容来填充超出指定高度的容器,滚动条可能会出现溢出:滚动但它将被禁用。如果您希望滚动条仅在实际需要时出现,您将需要使用overflow:auto作为CSS规则。通过设置子容器的高度而不是父容器的高度,父级可以根据需要增长。

在您的示例中,父容器上的position:absolute不是获取解决方案所必需的;但是,出于某些其他原因,您可能会将其包括在内。

猜你在找的HTML相关文章