title: CSS3: How can I set middle DIV to maximum height?
body: <p>I want to use three <code>&lt;div&gt;</code> areas on my web page: <em>Header</em>, <em>Content</em> and <em>Footer</em>.</p>
  
  <p>The <em>Footer</em> <code>&lt;div&gt;</code> is supposed to stick to the bottom of the web page.</p>
  
  <p>The <em>Header</em> <code>&lt;div&gt;</code> is supposed to stick to the top of the page.</p>
  
  <p>The <em>Content</em> <code>&lt;div&gt;</code> is supposed to fill the whole area in the middle of the page.</p>
  
  <p>So this is the basic layout:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="header"&gt;&lt;/div&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
    &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>For the <em>Footer</em> to stay down the page I added</p>
  
  <pre><code>#footer
  {
    position: fixed;
    bottom: 0;
  }
  </code></pre>
  
  <p>For the <em>Content</em> <code>&lt;div&gt;</code> I'm using a background image, scaling exactly to the <code>div</code> element's dimensions:</p>
  
  <pre><code>#content
  {
    background: url("Bilder/Bild.png") center contain no-repeat black;
  }
  </code></pre>
  
  <p>Now I want the <em>Content</em> <code>&lt;div&gt;</code> to be exactly the remaining height of the ViewPort between <em>Header</em> and <em>Footer</em> without adding any JavaScript, no matter what content is later added to the <em>Content</em> <code>&lt;div&gt;</code>.</p>
  
  <p>How can I do that in CSS3?</p>