title: Resize height of dynamiaclly sized div based on window size
body: <p>I have a div that is acting as a mask at the top of my page. The content of the page itself is absolutely centered on the page (see css). I give the div .holder a height based on the distance the #nav div is from the top of the window using jQuery.</p>
  
  <p>CSS:</p>
  
  <pre><code>#pagewrap 
  {
      position:absolute;
      width:915px;
      margin-left:-458px;
      padding:0;
      left:50%;
      height:100%;
      margin-top:-330px;
      top:50%;
  }
  
  .holder 
  {
      background: none repeat scroll 0 0 black;
      height: 0;
      position: fixed;
      top: 0;
      width: 915px;
      z-index: 10000;
  }
  
  #nav 
  {
      position:fixed;
      text-align:center;
      width:915px;
      height:224px;
      margin:0 auto;
      background:url(nav-off.png) no-repeat scroll 0 0 transparent;
      z-index:1001;
      font-family:'Cabin',sans-serif;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>var t = $("#nav");
  var offset = t.offset();
  $(function() 
  {
      $(".holder").css("height" , offset.top);
  });
  </code></pre>
  
  <p>Simple enough, but if the size of the window changes I'd like to have the height updated.</p>