title: Div height is not extending to bottom of page
body: <p>I have a page layout for a website I'm developing that goes something like this:</p>
  
  <pre><code>-------------------------------------Top Bar-------------------------------------
  |                                                                               |
  ---------------------------------------------------------------------------------
  --------Content (Has a dark filter that goes over the main background image)-----
  ------------ Main Content---------------------------|-------------SideBar--------
  |                                                   |                           |
  |                                                   |                           |
  |                                                   |                           |
  |                                                   |                           |
  |                                                   |                           |
  |                                                   |                           |
  |                                                   |                           |
  ---------------------------------------------------------------------------------
  </code></pre>
  
  <p>The  in my page is usually a photo that, for design purposes, I need to apply a dark filter. So I create a .content class that serves that purpose, and everything (except for the top bar) goes inside it.</p>
  
  <p>The problem I have is that, when the content in the .main-content container exceeds the page height, the filter does not go to the bottom of the page. I have the .content height at 100%, as well as the body and the html tags.</p>
  
  <pre><code>html {
      font-size: 16px;
      height:100%;
      overflow:auto;
  }
  body {
      font-size: 62.5%;
      /*10px = 1em*/
      line-height: 1.4;
      width:100%;
      height: 100%;
      min-height: 100%;
      overflow: auto;
  }
  .top-bar {
      width:100%;
      height:58px;
      position:fixed;
      top:0px;
      z-index: 5;
  }
  .top-bar.user {
      background-color:rgba(0, 0, 0, 1);
      font-size: 1.2em;
  }
  .content {
      display: block;
      margin-top: 58px;
      /* = top bar height*/
      width: 100%;
      height: 100%;
      min-height: 100%;
      position: absolute;
      background-color: rgba(0, 0, 0, 0.3);
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  .main-content {
      float: left;
      width: 75%;
      height: 100%;
  }
  .sidebar {
      position: fixed;
      right: 0;
      width: 25%;
      height: 100%;
  }
  </code></pre>
  
  <p>I tried to create the issue here: <a href="http://jsfiddle.net/apGgd/3/" rel="nofollow">http://jsfiddle.net/apGgd/3/</a></p>
  
  <p>Has you can see, as the table expands, the filter (the grey background) does not go along it. However if you remove the 'height:100%' from the .content, the issue goes away.</p>