Overflow-y导致div的高度为零
Overflow-y导致div的高度为零
提问于 2017-06-15 06:05:52
我有以下几点：
<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似乎工作得很好。
回答 2
Stack Overflow用户
发布于 2017-06-15 06:09:56
问题似乎不是来自overflow-y，而是您在<div class="row">中遗漏了右引号。如果不包括这个右引号，实际上会导致左侧的<div>无法显示。我猜Chrome会自动纠正这个问题，而Firefox不会。
我添加了一些背景色，并创建了一个显示此问题的JSFiddle ，以及另一个修复此问题的。
希望这能有所帮助！:)
Stack Overflow用户
发布于 2017-06-15 06:29:11
如果您使用包含元素百分比值的高度设置(如您所做的那样)，则该元素的父级也需要height设置。如果你指的是窗口高度的100% - 62px，你必须向每个父元素、祖父母元素等添加height: 100% -一个基于百分比的settong需要在父元素中有一个引用。在您的情况下，这将是
html, body, .row {
height: 100%;
}
@media (min-width: 768px) {
html,
body,
.row {
height: 100%;
}
#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);
}
}<div class="row">
<div id="left">
<div class="content"></div>
</div>
<div id="right">
<div class="content"></div>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/44555474
复制相关文章
相似问题
腾讯云开发者
