title: Div only stretches to browser-window height, not page height
body: <p>I have been having a big problem with my webpage for a long time now and hope I can find an answer to my problem with your help. I want a div that contains the content of my pages (which varies in length depending on the individual page) to stretch the length of my page, but it only stretches the length of the window. Here's the HTML and CSS:</p>
  
  <p>HTML (I only included the very basic structure):</p>
  
  <pre><code>&lt;html&gt;
  &lt;body&gt;
  &lt;div class="container"&gt;
  &lt;div id="content"&gt;
  &lt;div id="..."&gt;&lt;/div&gt;
  &lt;div id="..."&gt;&lt;/div&gt;
  &lt;div id="..."&gt;&lt;/div&gt;
  &lt;div id="..."&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;`
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body {
  height: 100%;
  font-family: Arial;
  font-size: 10px;
  color: #000000;
  background: #FFF url(../../images/body.png) no-repeat center 40px;
  margin: 0;
  position: relative;}
  
  .container {
  height: 100%;
  width: 960px;
  margin-right: auto;
  margin-left: auto;
  position: relative;}
  
  #content  {
  width: 939px;
  min-height: 100%;
  position: absolute;
  top: 210px;
  left: 6px;
  box-shadow: 0px 0px 8px #666;
  -moz-box-shadow: 0px 0px 8px #666;
  -webkit-box-shadow: 0px 0px 8px #666;
  background-color: #FFF;}
  </code></pre>
  
  <p>I tried to set the content div to overflow: auto, but that includes a scroll bar for the content div that I do not want. Am I missing anything? I thought min-height would work, but it doesn't! Does anybody maybe see where the problem lies?</p>
  
  <p>Thank you so much in advance for your help.</p>