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

Question

我希望两个垂直堆叠的空 div（用于显示背景图像）共享父容器高度的 50% 减去固定间隙（例如 20 像素）。我为此使用 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

很遗憾，没有解决方案。显然，表格单元格的高度行为不是规范的一部分。

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

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

Answer 2

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

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

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

查看Updated Fiddle