Question

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

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

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

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

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

请注意，红色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;将确保它不会扩展得太远。

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

2 个答案: