当应用overflow-y时,Chrome中的DIV未被渲染(其高度保持为零):scroll和position:absolute。如果删除了其中任何一个,则会渲染该框。 这在Firefox中不会发生。
HTML
<div id="container">
<div class="big"></div>
<div>
<ul>
<li>Element #1</li>
<li>Element #2</li>
<li>Element #3</li>
<li>Element #4</li>
<li>Element #5</li>
</ul>
</div>
</div>
CSS
#container ul {
list-style: none;
margin: 0;
overflow-y: scroll;
position: absolute;
top: 31px;
left: 0;
right: 0;
bottom: 0;
}
#container {
height: auto;
display: -moz-box;
display: -webkit-box;
display: box;
}
#container div{
position: relative;
height: 100%;
width: 200px;
}
#container div.big{
height: 500px;
}
这是一个显示问题的小提琴: http://jsfiddle.net/351bj7k4/5/
答案 0 :(得分:6)
实际上这不是一个错误。
通过使用Chrome开发者工具面板,您会看到height
元素及其父<ul>
的计算<div>
计算为0
。
<div id="container">
<div class="big"></div>
<div> <!-- <= This -->
<ul> <!-- <= And this -->
...
因为height
属性的百分比值(应用于<div>
)是相对于其父级的高度。
<强> 10.5 Content height: the 'height' property 强>
百分比是根据生成的框的高度计算的 containing block。如果包含块的高度不是 明确指定(即,它取决于内容高度),以及此 元素没有绝对定位,值计算为'auto'。
当使用绝对定位从正常流中移除<ul>
时,<div>
的计算高度将为0
。因此,<ul>
元素没有bottom: 0
声明的空间;因此<ul>
的计算高度也是0
。
因此,如果您将overflow-y: scroll
声明应用于<ul>
,则会将所有列表项隐藏为它们都是开箱即用的。
感谢Flexbox(您在容器上使用的display: box
旧语法),<div>
中的#container
元素默认填充其父级的整个高度。
因此,您可以从height: 100%
选择器中安全删除 #container div
声明,从而导致问题,并使用<div>
的Flexbox显示类型来制作<ul>
填满整个高度:
EXAMPLE HERE (另一个 HERE )
#container div {
position: relative;
/* height: 100%; */
width: 200px;
display: -moz-box;
display: -webkit-box;
display: box;
}
PS:为了检查旧的答案 - 这有点误解 - click here。