在div内部设置div以滚动,而父级不滚动

Question

我有一个容器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>

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

Answer 1

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

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

Answer 2

它被禁用,因为元素上没有定义的高度.如果您定义高度并且内容超出该高度,则溢出自动将填充滚动条.

#comments{
    height:200px;
    width:200px;
    position: relative;
    overflow: auto; 
}