title: Make div (height) occupy parent remaining height
body: <p>Consider the following HTML/css code sample:</p>
  <pre><code>&lt;div id=&quot;container&quot;&gt;
      &lt;div id=&quot;up&quot;&gt;Text&lt;br /&gt;Text&lt;br /&gt;Text&lt;br /&gt;&lt;/div&gt;
      &lt;div id=&quot;down&quot;&gt;Text&lt;br /&gt;Text&lt;br /&gt;Text&lt;br /&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <pre class="lang-css prettyprint-override"><code>#container { width: 300px; height: 300px; border:1px solid red;}
  #up { background: green; }
  #down { background:pink;}
  </code></pre>
  <p>where I have a container <code>div</code> with two children (also here: <a href="http://jsfiddle.net/S8g4E/" rel="nofollow noreferrer">http://jsfiddle.net/S8g4E/</a>). The first child has a given height. How can I make the second child to occupy the &quot;free space&quot; of the container <code>div</code> without giving a specific height?</p>
  <p>In the example, the pink <code>div</code> should occupy also the white space.</p>
  <hr />
  <p>Similar to this question: <a href="https://stackoverflow.com/questions/7198282/how-to-make-div-occupy-remaining-height">How to make div occupy remaining height?</a></p>
  <p>But I don't want to give <strong>position absolute</strong>.</p>