title: Dynamically set height of element in order to make it overflow: auto?
body: <p>I have a long list of elements which I would like to scroll while keeping the rest of the page static around it.</p>
  
  <pre><code>&lt;header&gt;
    &lt;!-- the header is stuck to the top of the page --&gt;
  &lt;/header&gt;
  &lt;ul class="list"&gt;
    &lt;!-- long list of stuff which should scroll --&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;!-- ... and so on, hundreds of elements --&gt;
  &lt;/ul&gt;
  &lt;footer&gt;
    &lt;!-- the footer is stuck to the bottom of the page --&gt;
  &lt;/footer&gt;
  </code></pre>
  
  <p>Now this seems to work as long as I set a height on the <code>&lt;ul&gt;</code>.</p>
  
  <pre><code>ul.list {
    overflow: auto;
    height: 700px;
  }
  </code></pre>
  
  <p>The problem is that if the user's browser is taller than <code>700px + [header height] + [footer height]</code> then <code>ul.list</code> won't take up all of it's available space. There is a gap between the list an the footer. Conversely, if the user's browser is smaller than <code>700px</code>, some of the list elements are hidden off the bottom of the page.</p>
  
  <p>How can I make the list take up all of the available height?</p>
  
  <p>The only way I can think of so far is to detect the <code>$header.offset()</code> and <code>$footer.offset()</code>, subtract them to get the distance between them and set the height of the <code>ul</code> everytime the window <code>resize</code> event is triggered. This seems like an overly complicated solution to what seems like it should be a simple problem. Is there a better way?</p>
  
  <p>By the way, this is the styling I have applied to make the fotter stick to the bottom of the page.</p>
  
  <pre><code>footer  {
    // stick the footer to the bottom of the page
    position: fixed;
    bottom: 0px;
    left: 0;
    right: 0;
  }
  </code></pre>