title: Dynamically resizing the height of div based upon the size/resolution of user's monitor
body: <p>I have a three row, one column site design and I'd like to have the center content div resize to fit the remainder of the column (height of screen - (hardcoded footerheight + hardcoded header height)). Is there a cute way to do this with CSS? If not, how can I accomplish this with javascript?</p>
  
  <p>Thanks,</p>
  
  <p>Tom</p>
  
  <pre><code>#container {
    background-color: gray;
    height: 100%;
  }
  #centercolumn {
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    width: 800px;
    height: 100%;
  }
  #header {
    background-color: blue;
    height: 150px;
  }
  #content {
    background-color: yellow;
  }
  #footer {
    height: 50px;
    background-color: blue;
  }
  
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="test.css" type="text/css" media="screen"/&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="container"&gt;
        &lt;div id="centercolumn"&gt;
          &lt;div id="header"&gt;
            header
          &lt;/div&gt;
          &lt;div id="content"&gt;
            content
          &lt;/div&gt;
          &lt;div id="footer"&gt;
            footer
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>