title: Css height/min-height 100% window
body: <p>Code: </p>
  
  <pre><code>&lt;html&gt;
      &lt;body&gt;
          &lt;div id="header"&gt;
          &lt;/div&gt;
          &lt;div id"content"&gt;
              Some random content
          &lt;/div&gt;
          &lt;div id="footer&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre class="lang-css prettyprint-override"><code>html {
      height: 100%;
  }
  body {
      width:960px;
      height: 100%;
      margin: 0 auto;
  }
  #header {
      height: 100px;
  }
  #content {
      min-height: 100%;
  }
  #footer {
      height: 100px;
      position: relative;
      bottom: 0;
  }
  </code></pre>
  
  <p>Problem:
  For what I have been reading, this code should do the height of the content div take all the height of the window even if the content it's smaller. The problem is that it makes it take more than the window height, even with a very small content.</p>
  
  <p>I don't understand how the content can take more than 100% height and how can I fix it.</p>