溢出-y滚动不适用于嵌套在div中的ul
问题描述:
必须有一些特殊要求才能使overflow-y: scroll
正常工作,并且我无法找到它......任何想法?溢出-y滚动不适用于嵌套在div中的ul
https://jsfiddle.net/tmnx2z0u/
HTML:
<div>
<ul>
<li>
One
</li>
<li>
One
</li>
<li>
One
</li>
<li>
One
</li>
<li>
One
</li>
<li>
One
</li>
<li>
One
</li>
</ul>
</div>
CSS:
div {
background-color: #FFFFEE;
width: 200px;
height: 100px;
overflow-y: hidden;
}
ul {
overflow-y:scroll;
}
答
从div容器元素中移除overflow-y:hidden。
为ul添加一个明确的高度。
div {
background-color:#FFFFEE;
width: 200px;
height: 100px;
//overflow-y: hidden;
}
ul {
height: 100px;
overflow-y:scroll;
}
应该这样做。
+0
根据OP的评论,看起来他们只是想让UL滚动,而不是整个div。这个答案是OP所要求的,并且应该被标记为正确的。 –
+0
谢谢,定义“高度”似乎有诀窍 – JacobIRR
答
更改DIV溢出-Y滚动和去除UL造型为我工作:
div {
background-color:#FFFFEE;
width: 200px;
height: 100px;
overflow-y: scroll;
}
/* you don't need this.
ul {
overflow-y:scroll;
}
*/
编辑:根据OP的评论,只有UL应滚动。 This答案完成了。我的回答将滚动div的全部内容。
答
编辑UL CSS来:
ul {
margin: auto;
height: 100px;
overflow-y:scroll;
}
通过添加“高度”属性,该属性等于父元素,以及“余量”到“汽车”。
为什么你不希望添加'溢出-Y:scroll'为'div',而不是'ul'? –
@CommercialSuicide - 因为这使得整个div向下滚动,而不仅仅是UL – JacobIRR
你可以将'ul'包装在辅助'div'中并设置为滚动条。 –