如何使元素在中间填充剩余高度 - IE8支持？

Question

使用flexbox（css3）或table（仅适用于最后一个元素）也有类似的问题和答案。

但是如何使用css2（对于IE8）使中间填充元素保持height？

 .parent {
   background: yellow;
   display: block;
   height: 200px;
 }
 .child {
   border: solid 1px #555;
 }
 .fill {
   height: 100%;
 }

<div class="parent">
  <div class="child">
    1
  </div>
  <div class="child fill">
    2 (fill available height)
  </div>
  <div class="child">
    3
  </div>
</div>

Fiddle

Answer 1

如果您需要IE8支持，请使用display:table / table-row

＆＃13;

＆＃13;

.parent {
  background: yellow;
  display: table;
  width: 100%;
  height: 200px;
}
.child {
  display: table-row;
}
.height{
  height: 20px /*change the value for what you like */
}
/*demo only */

.cell {
  display: table-cell;
  vertical-align: top;
  border: 1px solid #555
}

＆＃13;

<div class="parent">
  <div class="child height">
    <div class="cell">
      1
    </div>
  </div>
  <div class="child">
    <div class="cell">
      2 (fill available height)
    </div>
  </div>
  <div class="child height">
    <div class="cell">
      3
    </div>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;