jQuery, change div height to automatically fill out remainder of screen if content isn't already larger
<p>My site is structured roughly like this:</p>

<pre><code>-----------------
      header
-----------------
     |           
     |           
 side|    main  
     |
     |
-----------------
      footer
</code></pre>

<p>I'm trying to get my "main" div to take all of the remaining height on the screen (and resize during window resizing), so that "footer" is always automatically pushed to the bottom of the screen (appearing to be stuck at the bottom of the screen).</p>

<p>However, I want this only to happen if the content of the "main" div isn't already at that height or even larger. I'm using jQuery but I have a hard time calculating this correctly. Can someone give me a pointer in the right direction?</p>
