title: CSS: Make height of an inner div 100%, when parent is already 100%
body: <p>I have tried on my own for such a long time and all the posts I have read and googled so far have not helped me, so I hope one of you guys can give me a hint:</p>
  
  <p>I have a Layout consisting of a header, a footer, and a content. This layout streches over the whole page in height (which has already taken me a while to figure out). So far, so good. But now I want to stretch the <code>content-div</code> as far down as possible, down to the beginning of the footer. No matter what I do, it does not work, it either stays the length of the text in it, or it becomes the size of the whole window, hiding the footer and generating a scrollbar.
  I read about a solution making it <code>position:absolute</code>, but I don't want that.</p>
  
  <p>Here is the example: <a href="http://jsfiddle.net/N9Gjf/1/" rel="nofollow">http://jsfiddle.net/N9Gjf/1/</a></p>
  
  <p>You would really help me out! </p>
  
  <p>Here is the css:</p>
  
  <pre><code>html, body {
      height:100%;
      text-align:center;
  }
  
  #wrapper {
      min-height:100%;
      height:100%
      overflow: hidden;
      width:800px;
      margin: 0 auto;
      text-align: left;
      background-color:lightblue;
  }   
  
  #footer {
      background-color: silver;
      height:1.5em;
      width:800px;
      margin: -1.5em auto;
  }
  
  #header {
      background-color: orange;
      height:100px;
  }
  
  #content {
      background-color: limegreen;
  }
  
  * {
      margin:0;
      padding:0;
  }
  </code></pre>
  
  <p>And here is the html:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  
      &lt;div id="header"&gt;
          &lt;p&gt;Header&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="content"&gt;
      INHALT  
      &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="footer"&gt;
      &lt;p&gt;Footer&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>