<div> 以百分比表示的高度在 FF 和 IE 中的 table 单元格内时高度为 0

Question

我想要两个垂直堆叠的空 div（用于显示背景图像）恰好共享父容器高度的 50% 减去固定间隙（例如 20px）。我正在为此使用 calc() - 因为 Opera Mini 对我来说并不重要。

我在所有浏览器上都运行良好：

html,
body {
  height: 100%;
  width: 100%:
}
#parent {
  width: 100%;
  height: 100%;
  max-height: 600px;
  max-width: 400px;
}
#top {
  height: calc(50% - 10px);
  width: 100%;
  background: green;
}
#bottom {
  height: calc(50% - 10px);
  width: 100%;
  background: yellow;
  margin-top: 20px;
}

<div id="parent">
  <div id="top"></div>
  <div id="bottom"></div>
</div>

参见 JSFiddle： http://jsfiddle.net/Miglosh/bvndkw5y/

但是，作为下一步，我想将这个容器放在另一个容器旁边，该容器装有大约两倍大小的第三张图像。为此，我使用带有 display:table 的父容器和带有 display:table-cell.

的两个 div

#contact-pics {
  display: table;
  width: 100%;
  height: 100%;
}
.img-responsive {
  width: 100%;
}
.table_cell {
  display: table-cell;
  vertical-align: top;
}
.table_cell:first-child {
  width: 66.666666%;
  padding-right: 14px;
}
.table_cell:nth-child(2) {
  width: 33.333333%;
  padding-left: 14px;
}
#parent {
  width: 100%;
  height: 100%;
}
#top {
  height: calc(50% - 10px);
  width: 100%;
  background: green;
}
#bottom {
  height: calc(50% - 10px);
  width: 100%;
  background: yellow;
  margin-top: 20px;
}

<section id="contact-pics">
  <div class="table_cell">
    <img class="img-responsive" src="http://placehold.it/1650x1022" />
  </div>
  <div class="table_cell small">
    <div id="parent">
      <div id="top"></div>
      <div id="bottom"></div>
    </div>
  </div>
</section>

在 iOS、Android 浏览器、Safari、Chrome 上完美运行......

但在 FF 和 IE 中，两个较小的 div 会折叠并且不会显示，因此您看不到背景。

这是 JSFiddle： http://jsfiddle.net/Miglosh/bp251n71/

线索是什么？我昨天为此浪费了一整天的时间，但仍然没有找到解决方案。

感谢您的帮助，斯特凡.

Answer 1

我建议使用 display: flex; 而不是 display:table 将解决您的问题。

#parent {
    height: 100px;
    width: 100%;
}

#contact-pics {
    display: flex;
    width: 100%;
    height: 100%;
}

勾选Updated Fiddle

Answer 2

很遗憾，没有解决办法。显然，table-cells 的高度行为不是规范的一部分。

刚找到这个帖子：IE display: table-cell child ignores height: 100%

无事可做。好老的 JS 来帮忙！

<div> 以百分比表示的高度在 FF 和 IE 中的 table 单元格内时高度为 0

<div> with height in percentage has 0 height when inside table-cell in FF and IE

html

css

height

zero