title: How to set div height dynamically based on user's browser dimensions
body: <p>Using this example:</p>
  
  <p><a href="http://jsfiddle.net/FhWxh/" rel="nofollow">http://jsfiddle.net/FhWxh/</a>  </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="header"&gt;
          &lt;p&gt;Header&lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="content"&gt;
          &lt;p&gt;&lt;b&gt;Main content&lt;/b&gt;&lt;/p&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
      &lt;/div&gt;
  
      &lt;div id="sidebar"&gt;
          &lt;p&gt;&lt;b&gt;Sidebar&lt;/b&gt;&lt;/p&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          &lt;br&gt;
          Content
      &lt;/div&gt;
  
      &lt;div id="footer"&gt;
          &lt;p&gt;Footer&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:  </p>
  
  <pre><code>body {
      font: normal 16px/1.5em helvetica, arial, sans-serif
  }
  p {
      text-align:center;
  }
  #container {
      width:960px;
      margin:0px auto;
  }
  #header {
      text-align:center;
      background: #777;
      color:#fff;
      height:50px;
      padding:5px;
  }
  #content {
      float:right;
      width:610px;
      text-align:center;
      background:#ccc;
      padding:150px 5px;
  }
  #sidebar {
      float:left;
      width:330px;
      text-align:center;
      height:300px;
      background:#eee;
      padding:15px 5px;
      overflow:auto;
  }
  #footer {
      clear:both;
      text-align:center;
      background: #555;
      color:#fff;
      height:50px;
      padding:5px;
  }
  </code></pre>
  
  <p>How do I make the "sidebar" 100% of the height of the user's browser (minus 50 pixels to leave room for the header)?</p>
  
  <p>I believe it's possible to get the user's browser height using javascript and insert it dynamically into the css, but I don't know how to do that.   </p>