解决方案

Question

当应用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/

Answer 1

导致问题的原因

实际上这不是一个错误。

通过使用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。}

溢出y的错误：滚动和位置：Chrome中的绝对值

1 个答案:

导致问题的原因

解决方案