Html 将 div 内的 div 设置为滚动，而父级不滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8525919/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set a div inside of a div to scroll, while parent does not scroll
提问by user981053
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?
我有一个包含许多子 div 的容器 div。我的集装箱房屋中的一个 div 评论。我不想将整个 div 设置为滚动，而是希望所有内容都保持原位，只留下评论 div 进行滚动。我尝试将父溢出设置为隐藏，将注释 div 设置为滚动，滚动条实际上显示在页面上，但被禁用。有谁知道我怎么能做到这一点？
CSS
CSS
#container
{
position: absolute;
overflow: hidden;
}
#comments
{
position: relative;
overflow: scroll;
}
HTML
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.
我无法摆脱容器，因为它包含更多子元素。我只希望其他一切都保持静态，而只有评论可以滚动。
采纳答案by TLS
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:scrollbut it will be disabled. If you want the scrollbar to appear only when it's actually needed, you'll want to use overflow:autoas the CSS rule. By setting the height of the child container and not the parent, the parent can grow as necessary.
您需要在“评论”div 上设置特定的高度，以确保它确切知道何时滚动。如果没有足够的内容来填充超出指定高度的容器，滚动条可能会出现，overflow:scroll但它将被禁用。如果您希望滚动条仅在实际需要时出现，您需要将其overflow:auto用作 CSS 规则。通过设置子容器而不是父容器的高度，父容器可以根据需要增长。
In your example, the position:absoluteon the parent container is not required to obtain the solution; however, you might be including that for some other reason.
在您的示例中，position:absolute不需要父容器上的 来获取解决方案；但是，您可能出于其他原因将其包含在内。
回答by Kai Qing
It is disabled because there's no defined height on the element. Overflow auto will populate the scrollbar if you define a height and the content extends past that height.
它被禁用，因为元素上没有定义的高度。如果您定义高度并且内容超出该高度，溢出自动将填充滚动条。
#comments{
height:200px;
width:200px;
position: relative;
overflow: auto;
}
回答by Anil
You need to add a width and height:
您需要添加宽度和高度：
Check out this JSFiddle: http://jsfiddle.net/FgGmQ/
看看这个 JSFiddle：http://jsfiddle.net/FgGmQ/
HTML:
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:
CSS：
#container{
overflow: hidden;
}
#container span{
background-color: yellow;
}
#comments{
overflow: auto;
height: 80px;
width:150px;
}
Again, just check out this JSFiddle
再一次，看看这个 JSFiddle
