溢出-Y导致DIV具有零
问题描述:
高度我有以下几点:溢出-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);
}
}
当我检查DOM,内容类的高度不如预期,但左边和右边的div是零高度,因此没有显示在页面上。
删除overflow-y属性可以修复问题,但在div超过屏幕高度的情况下,我确实需要滚动。
我试过围绕左侧和右侧div的“clearfix”包装,但似乎没有做任何事情。
有人可以解释为什么父类不继承其内容的高度?
这只是Firefox中的一个问题,Chrome似乎工作正常。
答
如果您使用包含元素百分比值的高度设置(与您一样),该元素的父级也需要设置height
设置。如果您的意思是窗口高度的100% - 62px,则必须将height: 100%
添加到每个父级,祖父母等。 - 基于百分比标记的设置需要父元素中的引用。在你的情况下,这将是
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>
这似乎在Firefox的工作对我罚款。内容显示并可滚动。 https://codepen.io/mcoker/pen/dRpwwG –