title: CSS: Set div height to fill parent div, without position: abolute;
body: <p>I've got (again) the problem of adapting a child <code>&lt;div&gt;</code> tag's size to its parent size. The parent element is controlled by another script (don't want to touch that) and could be placed anywhere on the screen with variable height/width. In my example below that's the <code>#container</code>. I would like to put some layout in it, which has some variable and some fixed dimensions:</p>
  
  <ul>
  <li>a footer (here: <code>#footer</code>), having a fixed height (of e.g. 100px) and fills up the whole width of the parent</li>
  <li>a navigation bar on the left (here: <code>#left</code>), having a fixed width (of e.g. 150px) and fills up the whole height of the upper part</li>
  <li>a content part, right from the navigation bar, that is just the remaining space.</li>
  </ul>
  
  <p>I found some solution for the "footer", which actually works (<a href="https://stackoverflow.com/questions/90178/make-a-div-fill-the-remaining-screen-space">Make a div fill the height of the remaining screen space</a> -> the posting by 'daniels'). But I couldn't achieve the <code>#left</code> part to fill up the whole height.</p>
  
  <p>Below is my example code (Online-Version: <a href="http://worldtalk.de/v2013/test.html" rel="nofollow noreferrer">http://worldtalk.de/v2013/test.html</a>; will not stay online forever!):</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;title&gt;Title&lt;/title&gt;
      &lt;meta http-equiv="content-type" content="text/html; charset=utf-8" /&gt;
  
      &lt;style type="text/css" media="screen"&gt;
      * {  margin: 0; }
      html, body { height: 100%; }
      #container {
          position: absolute; /* have no control over that container element */
          width: 400px;  height: 300px;
          top: 100px;    left: 10px;
          background: red;
      }
      #upper {
          min-height: 100%;
          height:     auto !important;
          height:     100%;
          margin:     0 auto -100px; /* -100px being the size of the footer */
      }
      #footer {
          background: green;
          height: 100px;
      }
      #left {
        background: yellow;
        float: left; width: 150px;
  
        /* the following CSS doesn't do what I want... */
  
        min-height: 100%;
        height:     auto !important;
        height: 100%;
      }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="container"&gt;
        &lt;div id="upper"&gt;
          &lt;div id="left"&gt;left - shall reach down until footer&lt;/div&gt;
          content part...&lt;br&gt; shall be next to it...
        &lt;/div&gt;
        &lt;div id="footer"&gt;footer&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas to achieve this without using JavaScript?</p>
  
  <p>Regards,
  Stefan</p>