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

问题似乎不是来自GET/somestuff/abc/fergo-scd.pdf0ð[[#6]][[#3]]u[[#29]][[#31]][[#4]] HTTP/1.1. Any help appreciated，而是您错过了overflow-y中的右引号。如果未包含此结束引号，则实际上会导致左侧的<div class="row">不显示。我的猜测是，Chrome会自动更正此问题，而Firefox则不会。

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

希望这有帮助！：）

Answer 2

如果您使用包含元素百分比值的高度设置（与您一样），该元素的父也需要height设置。如果你的意思是100％ - 62px的窗口高度，你必须为每个父级，祖父级等添加height: 100% - 基于百分比的安置需要父元素中的引用。在你的情况下将是

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

＆＃13;

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

＆＃13;

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

＆＃13;

溢出-y使div的高度为零

2 个答案: