title: Fixed sidebar anchored between header and footer
body: <p>I have a sidebar that is <code>position:fixed</code> and <code>height:100%</code></p>
  
  <p>However, the effect is not what I desire. The height 100% is 100% of window where as I need to to be 100% of it's container, which is confined between the header and footer. The header is also fixed so the main content scrolls "underneath" it meanwhile the footer is anchored to the bottom of the main content which can be of variable height depending on how much content is loaded.</p>
  
  <p>In this <a href="http://jsfiddle.net/27U5n/" rel="nofollow">jsfiddle</a> I have set the height of the <code>ul#toolBarList</code> to <code>200px</code> to demonstrate. If you enlarge the window and scroll down, the sidebar should take the full white-space height. I do not mean to simple set a background behind the list, but rather that the bottom of the sidebar should anchor to the top of the footer.</p>
  
  <p>To see why 100% doesn't work, set <code>200px</code> to <code>100%</code> and witness how the list overflows the footer.</p>
  
  <p>Answer can be some concise javascript or perferably all CSS with compatibility with IE8+, latest chrome/firefox.</p>
  
  <p>Much thanks</p>