设置一个股利div滚动，而父母不滚动 [英] Set a div inside of a div to scroll, while parent does not scroll

问题描述

我有一个容纳多个子div的容器div。我的集装箱中的一个分区评论。我不想设置整个div来滚动，而是希望一切都保持原样，只留下评论div来滚动。我已经尝试将父级溢出设置为隐藏状态，并且要滚动的注释div以及滚动条实际显示在页面上，但它被禁用。有谁知道我该如何做到这一点？

CSS

 ＃货柜
 {
位置：绝对; 
 overflow：hidden; 
} 
 
 #comments 
 {
 position：relative; 
 overflow：scroll; 
 
  

HTML

 < div id =container> 
< div id =comments> 
这就是我想滚动
< / div> 
< / div> 
  

我无法摆脱容器，因为它容纳了更多的子元素。我只想让其他所有内容保持静态，而只有评论可以滚动。

解决方案

您需要在注释div上设置特定高度，以确保它确切知道何时滚动。如果没有足够的内容填充超出指定高度的容器，滚动条可能会出现 overflow：scroll ，但它将被禁用。如果您希望滚动条仅在实际需要时才显示，则您需要使用 overflow：auto 作为CSS规则。在您的示例中，位置：绝对值在父容器上不需要获得解决方案;但是，由于其他原因，您可能会将其包括在内。

I have a container div that holds many child divs. One of the divs in my container houses comments. Instead of setting the whole div to scroll, I want everything to stay in place, leaving only the comments div to scroll. I have tried setting the parent overflow to hidden, and the comment div to scroll, and the scrollbar actually shows on the page but it is disabled. Does anyone know how I can accomplish this?

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>

I cannot get rid of the container because it houses many more child elements. I just want everything else to stay static while only the comments can scroll.

解决方案

You need to set a specific height on the "comments" div to make sure it knows exactly when to scroll. If there's not enough content to fill up that container beyond the specified height, the scrollbar might appear with overflow:scroll but it will be disabled. If you want the scrollbar to appear only when it's actually needed, you'll want to use overflow:auto as the CSS rule. By setting the height of the child container and not the parent, the parent can grow as necessary.

In your example, the position:absolute on the parent container is not required to obtain the solution; however, you might be including that for some other reason.

这篇关于设置一个股利div滚动，而父母不滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！