title: Two divs on top op each other, together exact height 100% + lower div scrollable
body: <p>I'm stuck with this problem:</p>
  
  <p>I have a div (#container) which contains two divs. The height of the container should be exact 100%, regardless of the content of this div - not less not more.</p>
  
  <p>Inside this div I want two full-width divs on top of each other:</p>
  
  <ul>
  <li>The (#upper) div's content automatically determines its height. </li>
  <li>The (#lower) div's content should be scrollable, but only vertically. Its height is dependent on the height of (#upper): 100% - (#upper)height = (#lower)height</li>
  </ul>
  
  <p>Currently I have the following css ...</p>
  
  <pre><code>body {
      margin:0;
      padding:0;
      }
  #container 
      {
      position: relative;
      width: 500px;
      height: 100%;
      max-height: 100%;
      background-color: #f00;
      }
  #upper { 
      width: 100%;
      background-color: #0f0;
      }
  #lower {
      width: 100%;
      background-color: #00f;
      overflow: auto;
  }
  </code></pre>
  
  <p>... as well as this code:</p>
  
  <pre><code>&lt;div id="container"&gt;
  &lt;div id="upper"&gt;&lt;/div&gt;
  &lt;div id="lower"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How can the (#container)'s height be exactly 100% - independent of its content? Now the height becomes larger because of the combined content of (#upper) and (#lower)?</p>
  
  <p>How can (#lower) be scrollable (only up and down, not left to right!)?</p>
  
  <p>Thank you very much for your feedback, I hope we can all learn from this.</p>