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) 

});