Html 溢出-y使div的高度为零

我有以下资料：

<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);
    }
}

@介质（最小宽度：768px）{
#左{
位置：绝对位置；
顶部：52px；
底部：0；
左：0；
宽度：25%；
溢出y：自动；
高度：计算（100%-62px）；
}
#对{
位置：绝对位置；
顶部：52px；
底部：0；
右：0；
宽度：75%；
溢出y：自动；
高度：计算（100%-62px）；
}
}

当我检查DOM时，内容类的高度与预期的一样，但是左侧和右侧div的高度为零，因此页面上没有显示任何内容

删除overflow-y属性修复了这个问题，但我确实需要滚动以防div超过屏幕高度

我试着用“clearfix”包装左右两个div，但似乎没有任何效果

有人能解释为什么父类不继承其内容的高度吗

---

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

问题似乎不是源于

溢出-y

，而是您遗漏了

中的结束引号。未包含此结束引号实际上会导致左侧的

不显示。我猜Chrome会自动纠正这一点，而Firefox不会

我添加了一些背景色，并创建了一个JSFIDLE来演示这个问题，另外一个解决了这个问题

---

希望这有帮助！：）

如果使用包含元素百分比值的高度设置（如您所做的），则该元素的父元素也需要

高度

设置。如果您的意思是窗口高度的100%-62px，则必须将

高度：100%

添加到每个父级、祖父母等-基于百分比的settong需要在父级元素中引用。如果是你的话，那就太好了

html, body, .row {
  height: 100%;
}

@介质（最小宽度：768px）{
html，
身体
.行{
身高：100%；
}
#左{
位置：绝对位置；
顶部：52px；
底部：0；
左：0；
宽度：25%；
溢出y：自动；
高度：计算（100%-62px）；
}
#对{
位置：绝对位置；
顶部：52px；
底部：0；
右：0；
宽度：75%；
溢出y：自动；
高度：计算（100%-62px）；
}
}

不幸的是，这只是一个输入错误-为了示例，我简化了代码。该死的哈哈。尽管我的小提琴在Firefox和Chrome中都能正确显示。您能否确认您的代码不起作用，并确保您提供了一个问题示例？我记得当父母没有明确指定高度时，IE对基于百分比的高度有一个问题，所以你可能也有类似的问题。也许可以尝试在

.row

上指定一个高度。指定行的高度确实有效，问题是我不想硬编码。使用百分比是行不通的。使用百分比应该行得通，只要你一直使用相对百分比直到最终的固定高度。别忘了它也可以放在body上，你应该可以在body上指定

100vh

on。这在firefox中对我来说似乎很好。显示内容并可滚动。