|
|
忧郁的路灯 · 嘉兴市率先实现市域公交一体化 ...· 4 月前 · |
|
|
欢乐的蜡烛 · 文献管理软件//Zotero的下载安装、注册 ...· 1 年前 · |
|
|
活泼的热水瓶 · 中国石油天然气集团公司2012年度财务收支审 ...· 1 年前 · |
|
|
耍酷的马克杯 · 元旦假期北京重点商圈客流量增四成_深圳新闻网· 1 年前 · |
|
|
紧张的铅笔 · QSP-DUE多功能无头轧制技术在首钢京唐钢 ...· 1 年前 · |
我有一个容器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>
我不能摆脱容器,因为它容纳了更多的子元素。我只想让其他的东西保持静态,只有评论可以滚动。
您需要在"comments“div上设置一个特定的高度,以确保它确切地知道何时滚动。如果没有足够的内容填满超过指定高度的容器,滚动条可能会显示
overflow:scroll
,但它将被禁用。如果您希望滚动条仅在实际需要时出现,则需要使用
overflow:auto
作为CSS规则。通过设置子容器的高度而不是父容器的高度,父容器可以根据需要增长。
在您的示例中,父容器上的
position:absolute
不是获取解决方案所必需的;但是,您可能出于某些其他原因而将其包括在内。
它被禁用,因为元素上没有定义的高度。如果您定义了一个高度,并且内容超出了该高度,Overflow auto将填充滚动条。
#comments{
height:200px;
width:200px;
position: relative;
overflow: auto;
}
您需要添加宽度和高度:
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,
<span>The end of the container</span>
CSS:
#container{
overflow: hidden;
#container span{
background-color: yellow;