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

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

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

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

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

如何改变这种情况，使其在IE9和IE10中工作，就像在Chrome中仅使用CSS（不使用JavaScript！）一样？

请注意，红色div的高度必须为非零，这一点很重要。

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

谢谢！

最佳答案

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

以下是CSS

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

关于css - 使用CSS表格的动态div高度在IE9或IE10中不起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/20279961/