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

Answer 3

您需要添加宽度和高度：

Check out this JSFiddle: http://jsfiddle.net/FgGmQ/

HTML：

<div id="container">
<span>This is the container</span>
<div id="comments">
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll,
this is what I want to scroll, this is what I want to scroll, 
</div>
<span>The end of the container</span>

CSS：

#container{
    overflow: hidden;
}
#container span{
    background-color: yellow;   
}
#comments{
    overflow: auto; 
    height: 80px;
    width:150px;
}

再次，请查看this JSFiddle

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

3 个答案: