title: Sidebar to fill height of entire page
body: <p>This is perhaps a common question, but all the answers I have found around the web, didn't work properly.</p>
  
  <p>I want to create a sidebar for my webpage, which fills the entire height of the webpage.
  Then when you scroll the sidebars content should move along the rest of the sites content.</p>
  
  <p>I tried this methods:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
     &lt;div id="sidebar"&gt;&lt;/div&gt;
     &lt;div id="content-area"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>body {
     margin: 0;
  }
  
  #wrapper {
     width: 100%;
  }
  
  #sidebar {
     width: 280px;
     position: absolute;
     top: 0;
     bottom: 0;
  }
  
  #content-area {
     width: 900px;
     margin-left: 280px;
  }
  </code></pre>
  
  <p>..and:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="wrapper"&gt;
     &lt;div id="sidebar"&gt;&lt;/div&gt;
     &lt;div id="content-area"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>body {
     height: auto;
     min-height: 100%;
     margin: 0;
  }
  
  #wrapper {
     width: 100%;
     height: 100%;
  }
  
  #sidebar {
     width: 280px;
     height: 100%;
     float: left;
  }
  
  #content-area {
     width: 900px;
     height: 100%;
     float: left;
  }
  </code></pre>
  
  <p>The first one works fine, until the content is extended: <a href="http://jsfiddle.net/B3bCb/1/" rel="nofollow">http://jsfiddle.net/B3bCb/1/</a>
  If that happens then the sidebar stops according to the browser-window height.</p>
  
  <p>The second one didn't worked at all: <a href="http://jsfiddle.net/B3bCb/2/" rel="nofollow">http://jsfiddle.net/B3bCb/2/</a></p>
  
  <p>I have also tried the faux column method, but I need to have an CSS-shadow <em>(which blur, spread and color, can be changed dynamically on the site)</em> on my sidebar, which I cannot do properly in the faux column method <em>(Faux column is just an image)</em>.</p>
  
  <p>So how do I make my sidebar 100% in height, no matter how much content I have?</p>