title: HTML/CSS SIdebar with header/footer and scrollable content at full height
body: <p>I'm basically trying to create a sidebar which is the full browser height within a container (done). The sidebar has a header and footer, where the footer is always stuck to the bottom of the browser. The content between these can then be flexible in size.</p>
  
  <p>I have an example which works if the content does not go past the height:</p>
  
  <pre><code>&lt;div class="container"&gt;
  
      &lt;div class="sidebar"&gt;
          &lt;div class="profile"&gt;
              Profile Area
          &lt;/div&gt;
  
          &lt;ul class="list"&gt;
              &lt;li&gt;List Item&lt;/li&gt;
              &lt;li&gt;List Item&lt;/li&gt;
              &lt;li&gt;List Item&lt;/li&gt;
              &lt;li&gt;List Item&lt;/li&gt;
              &lt;li&gt;List Item&lt;/li&gt;
          &lt;/ul&gt;
  
          &lt;div class="foot"&gt;
              Footer area
          &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="main"&gt; 
          Content Area
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="http://jsfiddle.net/w26cm/2/" rel="nofollow noreferrer">http://jsfiddle.net/w26cm/2/</a></p>
  
  <p>However, if I start to add more content, I'd like the list to stop pushing the page down (whatever height it is) and form a scroll bar.</p>
  
  <p>A working example of this is Soundclouds sidebar: <a href="https://soundcloud.com/" rel="nofollow noreferrer">https://soundcloud.com/</a></p>
  
  <p>So basically here is the list when it gets too big: <a href="http://jsfiddle.net/w26cm/4/" rel="nofollow noreferrer">http://jsfiddle.net/w26cm/4/</a></p>
  
  <p>How am I supposed to set the content/list to only be the height of what is left between the header and footer, and any excess turns into a scroll.</p>