title: Div won't stretch to the bottom of the page
body: <p>I am trying to make a <code>&lt;div&gt;</code> stretch to the bottom of the page.
  I want this <code>&lt;div&gt;</code> to be something like a bar all along the left side of my page. It does stretch along the left side when I open the page but when I'm scrolling down it won't stretch anymore.
  The thing is I have multiple <code>&lt;div&gt;</code>s wrapped inside one another, but this one I am talking about is child only of <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> elements.
  I tried a lot of things to make it work properly but <code>height:auto;</code>, <code>height:100%;</code> or <code>height:inherit;</code> don't seem to work, but it works if I use <code>height:000px;</code>.
  I should also mention that both <code>&lt;html&gt;</code> and <code>&lt;body&gt;</code> have <code>height:100%;</code> and <code>width:100%;</code>.</p>
  
  <p>The code looks like this:</p>
  
  <pre><code>  .leftbar {
      background-color: rgba(0,0,0,0.85);
      width: 10%;
      height: 100%;
      float: left;
      position: relative;
      left: 0;
      margin-top:0;
      bottom:0;
      right:0;
      overflow: hidden;
  }
  </code></pre>
  
  <p>What confuses me even more is that I also have a footer on the bottom side of my page but it works great. It stretches as much as I need it to.
  The code for it looks like this:</p>
  
  <pre><code>.footer {
      background-color: rgba(0,0,0,0.85);
      width: 100%;
      height: 50px;
      position: relative;
      bottom: 0;
  }
  </code></pre>
  
  <p>Could you tell me pls why that left side bar won't stretch?</p>