html - 如何让中间的元素填充剩余高度-IE8支持？

Question

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

但是如何使用 css2(对于 IE8)使中间的元素填充剩余的高度？

 .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

.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
}

<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>