title: How do I lock a sidebar to the height of a window even when a user scrolls?
body: <p>I'm running into a minor issue with one of the elements on my page. I have a sidebar which I am attempting to have span the height of the page by using the following CSS:</p>
  
  <pre><code>#sidebar {
      width: 180px;
      padding: 10px;
      position: absolute;
      top: 50px;
      bottom: 0;
      float: left;
      background: #eee;
      color: #666;
  }
  </code></pre>
  
  <p>The corresponding CSS is pretty much what you'd expect:</p>
  
  <pre><code>&lt;div id="header"&gt;
      The header which takes up 50px in height
  &lt;/div&gt;
  &lt;div id="main-container"&gt;
      &lt;div id="sidebar"&gt;
          The sidebar in question
      &lt;/div&gt;
      &lt;div id="main-content"&gt;
          The rest of my page
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The code works as expected for the most part. When the page renders it spans 100% of the height (minus the 50px from the top). The problem is that it essentially assigns the box to the exact height of the window so as I scroll down the box scrolls away instead of staying locked to the bottom of the window. Any ideas how to resolve this?</p>