Question

我想要两个垂直堆叠的空div（显示背景图像），以准确分享父容器高度的50％减去固定间隙（例如20px）。我正在使用calc（） - 因为Opera Mini在我的情况下并不重要。

我在所有浏览器上都能正常工作：

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

的div

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

在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

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

2 个答案: