title: Textarea to fill available vertical space in a div
body: <p>Is there a solid way to let a textarea fill the available space in a div?</p>
  
  <ul>
  <li>The #outer div has a fixed height.</li>
  <li>The #header div has dynamic content.</li>
  <li>The #body div contains a textarea and should fill remaining space in #outer div. </li>
  </ul>
  
  <h2><img src="https://i.stack.imgur.com/cpXl8.png" alt="reference render"></h2>
  
  <p>This is the solution I have got so far: <a href="http://jsbin.com/UqelOYi/9/watch?html,css,output" rel="nofollow noreferrer">http://jsbin.com/UqelOYi/9/watch?html,css,output</a></p>
  
  <p>It's a working for solution Chrome and Safari, but it does not render well for Firefox and more important Internet Explorer. I am looking to support IE8+.</p>
  
  <p>Most preferable would be a solution that does not involve any JavaScript.</p>
  
  <p>Note that the Gmail compose popup has similar behavior, where the recipients header can grow in size while the message body textarea shrinks.</p>