Измените размер divimalaclly размера div на основе размера окна

Question

У меня есть div, который действует как маска в верхней части моей страницы. Содержимое самой страницы абсолютно сосредоточено на странице (см. Css). Я даю div .holder высоту, основанную на расстоянии, которое #nav div находится в верхней части окна, используя jQuery.

CSS:

#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; 
} 

Javascript:

var t = $("#nav"); 
var offset = t.offset(); 
$(function() 
{ 
    $(".holder").css("height" , offset.top); 
}); 

достаточно просто, но если изменение размера окна, я хотел бы иметь высоту обновляется.

Answer 1

использование jQuery resize способ обнаружения изменение размера окна.

$(window).resize(reset); 

function reset(){ 
     var t = $("#nav"); 
     var offset = t.offset(); 
     $(function() { 
       $(".holder").css("height" , offset.top);  
      }); 
} 

$(document).ready(function(){ 
    reset();// set on page load 
}); 

Answer 2

Поместите весь скрипт в функцию, и вызвать эту функцию на обоих document.ready и $(window).resize()