css - Make a <div> dynamically fill the remainder of parent's height -

is possible make div fill remainder of parent's height, after space has been allocated other elements?

specifically, following layout:

<div id="parent">   <div id="sibling"></div>   <div id="resizablediv"></div> </div> 

the parent has known, fixed height. however, sibling toggle-able, , may either have 0 height (display: none), or normal height. resizable div last child of parent.

---

can done:

• dynamically, meaning updates when previous sibling shown or hidden; or inserted, removed; etc
• without javascript?
• without knowing height of other siblings in advance?
• for ie9 (extra credit)

thanks!

it possible css table , table-row.

http://jsfiddle.net/xs06asy9/

$("button").click(function () {      $("#resizablediv").toggle();  });

#parent {      display: table;      width: 100%;      height: 100px;  }  #sibling, #resizablediv {      display: table-row;      background: silver;  }  #resizablediv {      background: gray;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>  <div id="parent">      <div id="sibling">1</div>      <div id="resizablediv">2</div>  </div>    <br/><button>show/hide</button>