title: Resize div on browser resize
body: <p>I have a <code>&lt;div&gt;</code> which I want to display full screen, but I also need to incorporate a <code>60px</code> high <code>&lt;div&gt;</code> and a <code>10px</code> high <code>&lt;div&gt;</code> at the top of the document. The size of the main div will need to re-size as the browser window is re-sized to keep it full screen. </p>
  
  <pre><code>&lt;div id="div1" style="height: 60px"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="div2" style="height: 10px"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="fullscreen"&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>So:</p>
  
  <p>fullscreen height = <code>document size - (#div1 + #div2)</code></p>
  
  <p>On re-size recalculate the above value. </p>