使用 css 表的动态 div 高度在 IE9 或 IE10 中不起作用

Question

考虑以下小提琴：http://fiddle.jshell.net/du8Ws/

目的是在第一个 div（蓝色）的大小发生变化时调整底部 div（红色）的大小以消耗剩余的垂直空间。

在 chrome 或 IE11 中运行时，观察如果用户单击切换大小按钮，蓝色 div 会改变大小，红色 div 会相应改变大小，这样蓝色、绿色和红色 div 都包含在同一个高度（等于粉红色的 div 高度供参考）。

在 IE9 或 IE10 中运行时，红色 div 的高度将比它应该的高出等于蓝色 div 的高度。

如何改变这一点，使其在 IE9 和 IE10 中的工作方式与仅使用 css（没有 javascript！）在 Chrome 中的工作方式相同？

请注意，红色 div 的高度必须不为零。

pstenstrm 提供了一个很好的解决方案，看起来可以正确显示，但是在这种情况下，红色 div 的实际高度等于其子级（文本），而不是其父级的剩余可用空间，而内部和外部高度占用更多空间（由于填充/边距）。我打算在这个红色 div 中嵌入一个控件，它要求高度正确。

谢谢！

Answer 1

当我从 Table 类中删除 display:table 属性时。它开始工作并将数据向下推送而不增加整个容器的高度。作为预期的行为。但是红色的补丁没有显示出来。

下面是CSS

.table {
    background-color: #FFFF00;
    height: 100%;
    width: 100%;
}

Answer 2

如果解决方案不必使用表格，您可以使用溢出、填充和负边距的组合来获得此效果。它还会产生更清晰的 html。

您需要的标记：

<div id="reference"></div>

<div class="container">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

还有css：

#reference {
  background: pink;
  height: 300px;
  width: 50px;
  float: left;
}

.container {
  background: yellow;
  height: 300px;
  width: 50px;
  float: left;
  overflow: hidden;
}

.first {
  height: 50px;
  background: blue;
}

.first.big {
  height: 100px;
}

.second {
  background: green;
}

.third {
  background: red;
  padding: 0 0 999px;
  margin: 0 0 -999px;
}

红色 div 的内边距会一直向下扩展背景。容器overflow: hidden; 将确保它不会扩展太多。