title: Resizable DIV container with header/body/footer where body is scrollable
body: <p>I've missed something very simple, but I'm unable to get this resizable <code>div</code> container to work the way I want.</p>
  
  <p>Example here: <a href="http://jsfiddle.net/thinkingmedia/yrJre/" rel="nofollow">http://jsfiddle.net/thinkingmedia/yrJre/</a></p>
  
  <p>My problem is that the body is not overflowing and triggering the scrollbar. The contents of the <code>div</code> remain the same size when the container is resized.</p>
  
  <pre><code>+------------------------------+
  | HEADER                       |
  +------------------------------+
  | BODY                       |X|
  |                            |-|
  |                            | |
  |                            | |
  |                            | |
  |                            | |
  |                            | |
  |                            | |
  |                            | |
  |                            |-|
  |                            |X|
  +------------------------------+
  | FOOTER                       |
  +------------------------------+
  </code></pre>
  
  <p>Illustration above of what I want.</p>
  
  <p>I want to create a resizable <code>div</code> where the body content is scrollable, but the header/footer remain visible. </p>