Question

如果这是一个小问题，请提前抱歉，但我是javascript的新手。我正在为具有全角彩色背景的网页编写代码。基本上，我要做的是检测窗口的高度，然后确保颜色块是窗口的大小。该功能适用于页面加载。

问题是当我缩小窗口时，div高度不随窗口大小而变化。我得到各种各样的错误，比如从div后面伸出的图形。

我认为我缺少的是一种检测每个div中内容高度的方法，并相应地调整高度。

查看其工作原理

以下是代码：

$(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)

});

jQuery窗口调整大小功能无法正常工作

1 个答案: