title: CSS Layout Help - Stretch div to bottom of page
body: <p>I'm trying to create a layout with a 'header' area which contains a logo and some links, and then a content area which needs to extend to the bottom of the page. This is where I'm getting stuck.</p>
  
  <p>I've surrounded the header and content with a container div which has a height of 100%, this works fine. But I can't then get the content div to stretch to the bottom of the container div as giving it a minimum height of 100% appears to take the height from the page body, so I end up with a scroll bar due to the space taken up at the top of the page by the header.</p>
  
  <p>Here's a wireframe which hopefully makes what I'm trying to achieve a bit clearer...</p>
  
  <p><img src="https://i.stack.imgur.com/949CV.png" alt="Mockup"></p>
  
  <p>Here is a quick CSS example, this works, apart from there always being a scrollbar at which appears to be the height of the header area...</p>
  
  <pre class="lang-css prettyprint-override"><code>html, body {
      height: 100%;
      margin: 0;
      padding: 0;
      color: #fff;
  }
  body {
      background-color: #000;
  }
  #container {
      position: relative;
      margin: 0 auto;
      width: 1000px;
      min-height: 100%;
  }
  #header {
      padding-top: 26px;
  }
  #logo {
      width: 194px;
      height: 55px;
      margin: 0 auto;
      background-color: #fff;
  }
  #content {
      margin-top: 10px;
      position: absolute;
      width: 1000px;
      min-height: 100%;
      background-color: #fff;
  }
  </code></pre>