jQuery窗口調整大小功能不起作用

Question

對不起，如果這是一個小問題，但我是新來的JavaScript。我正在爲具有全寬彩色背景的網頁編寫代碼。本質上，我試圖做的是檢測窗口的高度，然後確保顏色塊是窗口的大小。該功能在頁面加載時效果很好。

問題是當我縮小窗口時，div高度不隨窗口大小而改變。我會遇到各種各樣的錯誤，比如從div後面伸出的圖形。

我想我缺少的是一種方法來檢測每個div內的高度，並相應地調整高度。

你可以看到它是如何工作的http://pressshoppr.com

下面的代碼：

$(function(){ 
    var windowH = $(window).height(); 
    if(windowH > wrapperH) { 
     $('.fullWidthSectionBG').css({'height':($(window).height())+'px'}); 
     $('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'}); 
    } 
    $(window).resize(function(){ 
     var windowH = $(window).height(); 
     var wrapperH = $('.fullWidthSectionBG').height(); 
     var newH = wrapperH + differenceH; 
     var truecontentH = $('.fullWidthSection').height(); 
     if(windowH > truecontentH) { 
      $('.fullWidthSectionBG').css('height', (newH)+'px'); 
      $('.fullWidthSectionBGFirst').css('height', (newH)-120+'px'); 
     } 
    }); 
}); 

Answer 1

我不知道我完全理解你要對這裏的影響，但我想，如果你的初始一小段代碼實現了它，你所要做的就是重複使用它。對待每一個調整彷彿頁面剛剛加載，並得到你想要的結果，例如：

$(function(){ 

    // encapsulate the code that we know WORKS 
    function init() { 
    var windowH = $(window).height(); 
    if(windowH > wrapperH) { 
     $('.fullWidthSectionBG').css({'height':($(window).height())+'px'}); 
     $('.fullWidthSectionBGFirst').css({'height':($(window).height())-120+'px'}); 
    } 
    } 

    // call on page ready 
    init() 

    // ...and call again whenever the page is resized 
    $(window).resize(init) 

});