溢出-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似乎工作正常。

来源

2017-06-14 ventsyv

这似乎在Firefox的工作对我罚款。内容显示并可滚动。 https://codepen.io/mcoker/pen/dRpwwG –

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

我已经添加了一些背景颜色，并创建了一个JSFiddle展示此问题here，另一个修复此问题here。

希望这会有所帮助！ :)

来源

2017-06-14 22:09:55

不幸的是，这只是一个错字 - 我为了这个例子简化了代码。 – ventsyv

喂哈哈。尽管我的小提琴在Firefox和Chrome中都能正确显示。您能否确认您的代码无法正常工作，并确保您提供了[**最小，完整且可验证的示例**]（http://stackoverflow.com/help/mcve）示例问题？我记得当父母没有明确指定高度**时，IE有一个基于百分比高度的问题，所以有可能你有类似的问题。也许尝试在'.row'上指定一个高度。 –

指定行的高度确实有效，问题是我不想硬编码。使用百分比不起作用。 – ventsyv

如果您使用包含元素百分比值的高度设置（与您一样），该元素的父级也需要设置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>

来源

2017-06-14 22:29:11 Johannes

溢出-Y导致DIV具有零

回答

相关问题