title: Dynamic DIV Container Height
body: <p>i know every web-developer hates this topic, but anyway... i found no <strong>good solution</strong> for this.</p>
  
  <p>i have 3 DIVs, <strong>two static</strong> (grey ones) and <strong>one dynamic</strong> (red one).
  The image describes the whole window. Such as at a chat application.</p>
  
  <p><img src="https://i.stack.imgur.com/MAXRv.png" alt="the div container"></p>
  
  <p>And, yep, the question is: how do i get the red one dynamic when the window get resized (or on other layout changes).
  Is there a soltuon <strong>without javascript</strong>, just CSS(3)?</p>
  
  <p><strong>Edit</strong>: Condition: the DIV on bottom should stay on bottom of the window, sorry.</p>
  
  <p>Additional Information</p>
  
  <p>I already done it in JS (jQuery), but i think this is no good practice at all. (The resize method for the middle DIV have to implement in every "layout changing event").</p>
  
  <p>Example here:</p>
  
  <pre><code>var div1 = $('#div1').outerHeight(true);
  var div2 = $('#div2').outerHeight(true);
  var div3Padding = $('#div3').outerHeight(true) - $('#div3').innerHeight();
  
  $('#div3').css({ height: window.innerHeight - (div1 + div2) - div3Padding });
  </code></pre>