How to make the element in the middle fill remaining height - IE8 support?

Question

There are similar questions, and answers using flexbox (css3), or table (work for the last element only).

But how can I make the element in the middle fill remaining height , using css2 (for 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

if you need IE8 support then use 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>