首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >将div中的div设置为滚动,而父级不滚动

将div中的div设置为滚动,而父级不滚动
EN

Stack Overflow用户
提问于 2011-12-16 04:06:52
回答 3查看 59.4K关注 0票数 38

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

我不能摆脱容器,因为它容纳了更多的子元素。我只想让其他的东西保持静态,只有评论可以滚动。

EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2011-12-16 04:20:31

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

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

票数 30
EN

Stack Overflow用户

发布于 2011-12-16 04:21:50

它被禁用,因为元素上没有定义的高度。如果您定义了一个高度,并且内容超出了该高度,Overflow auto将填充滚动条。

#comments{
    height:200px;
    width:200px;
    position: relative;
    overflow: auto; 
}
票数 15
EN

Stack Overflow用户

发布于 2011-12-16 04:24:58

您需要添加宽度和高度:

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

票数 4
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8525919

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档