在 IE9+ 上将绝对定位的 div 设为其父级的 50% 高度答案

【问题标题】：Make absolutely positioned divs 50% height of their parent on IE9+在 IE9+ 上将绝对定位的 div 设为其父级的 50% 高度
【发布时间】：2015-08-19 15:01:32
【问题描述】：

我试图让几个 div 跨越其容器的整个高度（这是一个表格单元格并且具有可变高度）。我希望每个 div 都是其父级的 50%，并且我也希望它们彼此之上。我所做的是将顶部的绝对定位为 top: 0; bottom: 50%; 和底部的一个为 bottom: 0;最高：50%。这种方法在大多数浏览器上都可以正常工作，但在 IE9+ 上。

这是我在 Chrome、Firefox 和 Safari 上的布局（令人惊讶的是，IE8 也是如此）以及我在 IE9+ 上得到的布局：

由于某种原因，这两个绝对定位的 div 在 Internet Explorer 上重叠。

这是我的标记：

<div class="table">
    <div class="cell">
        Bacon ipsum dolor amet short ribs shankle cupim strip steak shank bresaola bacon. Corned beef tri-tip turkey boudin. Strip steak short ribs meatloaf bacon shank kielbasa prosciutto. Pork chop picanha drumstick kielbasa jerky shankle strip steak beef ribs tenderloin pig tail landjaeger turducken.
    </div>
    <div class="cell">
        <div class="top">TOP DIV</div>
        <div class="bottom">BOTTOM DIV</div>
    </div>
</div>

这些是我的风格：

.table {
  display: table;
  background-color: #cbcbcb;
  border-spacing: 10px;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  position: relative;
  width: 70%;

  &:first-of-type {
    width: 30%;
  }
}

.bottom,
.top {
  box-sizing: border-box;
  position: absolute;
  background-color: #fff;
  padding: 20px;
  width: 100%;
}

.bottom {
  bottom: 0;
  top: 50%;
  margin-top: 5px;
}

.top {
  top: 0;
  bottom: 50%;
  margin-bottom: 5px;
}

这是一个可以玩的垃圾箱：http://jsbin.com/yifeqe/edit?html,css,output

有什么想法吗？

【问题讨论】：

标签： html css internet-explorer cross-browser

【解决方案1】：

问题是position:absolute 在 IE 中阻止了您的 div，因此您只能看到底部 div。

IE 不会那么友好地定位绝对，所以你必须使用：

display:inline-block;

相反。

这是一个更新的 jsfiddle。

IE Fiddle

【讨论】：

感谢您的回答！在这种情况下，将 div 设置为 display: inline-block 并关闭 position: absolute 并不能解决问题，因为我需要它们（作为一个整体）一直向上和向下跨越包含单元格：i.imgur.com/gAE61V7.png。不能不绝对定位它们，因为 top 和 bottom 那时不会有任何影响。
已编辑代码，似乎可以使用绝对位置，但 IE 无法正确使用您的底部：%;