<div> 在 FF 和 IE 中的表格单元格内，以百分比表示的高度具有 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

不幸的是，没有解决方案。显然，table-cells的height行为并不是规范的一部分。

刚刚发现这个线程:IE display: table-cell child忽略height: 100%

没办法。好老JS来帮忙!

Answer 2

我建议使用display: flex;代替display:table将解决您的问题。

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

检查更新的提琴