使用css表格的动态div高度不'；我不能在IE9或IE10中工作

考虑以下几点：

这样做的目的是当第一个div（蓝色）的大小改变时，调整底部div（红色）的大小以占用剩余的垂直空间

在chrome或IE11中运行时，请注意，如果用户单击“切换大小”按钮，蓝色div将改变大小，红色div将相应地改变大小，以便蓝色、绿色和红色div都包含在相同的高度内（参考时等于粉色div的高度）

当在IE9或IE10中运行时，红色div的高度将比它应该的大一个等于蓝色div高度的量

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

请注意，红色div的高度必须非零

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

---

谢谢

当我从表类中删除

display:table

属性时。它开始工作并向下推送数据，而不增加整个容器的高度。如预期的行为。但是红色的补丁没有显示出来

下面是

CSS

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

---

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

您需要的标记：

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

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

---

红色div的填充将背景一直向下展开。容器

溢出：隐藏将确保它不会扩展太远
 在这种情况下，红色div没有任何高度，这是重要的行为。我会更新原来的问题，使之更清楚。谢谢你的回答。这是一个很好的答案，但是在本例中，第三个div的高度不正确，即使在示例中背景显示正确。div的高度等于其内容（即文本的高度），而内部和外部高度都大于1000px。在原始示例中，红色div的高度为400px。我打算使用此效果时，要求div的高度正确。我会在原质询中更清楚说明这点。
#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;
}