html - Overflow-y 导致 div 的高度为零

Question

我有以下内容:

<div class="row">
    <div id="left">
        <div class="content"></div>
    </div>

    <div id="right">
        <div class="content"></div>
    </div>
</div>

@media (min-width: 768px) {
    #left {
        position: absolute;
        top: 52px;
        bottom: 0;
        left: 0;
        width: 25%;
        overflow-y: auto;
        height: calc(100% - 62px);
    }

    #right {
        position: absolute;
        top: 52px;
        bottom: 0;
        right: 0;
        width: 75%;
        overflow-y: auto;
        height: calc(100% - 62px);
    }
}

当我检查 DOM 时，内容类的高度符合预期，但左右 div 的高度为零，因此页面上没有显示任何内容。

删除 overflow-y 属性可以解决问题，但我确实需要滚动以防 div 超过屏幕高度。

我在左右 div 周围尝试了“clearfix”包装器，但它似乎没有做任何事情。

谁能解释一下为什么父类不继承其内容的高度？

顺便说一句，这只是 Firefox 中的一个问题，Chrome 似乎工作正常。

Answer 1

问题似乎不是来自 overflow-y ，而是您错过了 <div class="row"> 中的结束引号.未能包含此右引号实际上会导致 <div>左边不显示。我的猜测是 Chrome 会自动更正此问题，而 Firefox 不会。

我添加了一些背景颜色，并创建了一个 JSFiddle 来展示这个问题 here ，以及另一个解决此问题的方法 here .

希望对您有所帮助! :)