html - 当在 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

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

刚刚找到这个线程:IE display: table-cell child ignores height: 100%

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