title: Set <div> Height to Bottom of Browser Window
body: <p>While it seems there should be a way to do this, I'm starting to suspect there is not.</p>
  
  <p>I have a content <code>&lt;div&gt;</code> located somewhere on my page.</p>
  
  <pre><code>+---------------------------+
  | Header                    |
  +---------------------------+
  |         |                 |
  | Sidebar | Content         |
  |         |                 |
  |         |                 |
  |         |                 |
  +---------+-----------------+
  </code></pre>
  
  <p>What I would like to do is set the height of the content <code>&lt;div&gt;</code> such that the bottom is equal to the bottom of the browser window.</p>
  
  <p>I know I can do this with absolute positioning. But is there no way to do this within an existing layout? If the only way is with JavaScript/jQuery, then I'd be interested to see how that might be accomplished.</p>
  
  <p><em>Ulimately, my goal here is to make this <code>&lt;div&gt;</code> scrollable using <code>overflow-x: auto</code>. But I must have a fixed height in order for that to work.</em></p>