问题与设定高度的jQuery

Question

我想要的高度设置为与jQuery两个元素... Link to example

的jQuery：

$(document).ready(function() { 
    var windowWidth = $(document).width(), 
     windowHeight = $(document).height(), 
     fadeSpeed = 'slow'; 

    var aboutOffset = $('div.about').offset().top; 

    $('div.head').height(windowHeight); 
    $('div.nav').fadeIn(fadeSpeed, function() { 
     $('div.head > div.title').fadeIn(fadeSpeed, function() { 
      $('div.head > img').fadeIn(fadeSpeed); 
     }); 
    }); 
    $('div.head > img').on('click', function() { 
     $('html, body').animate({ 
      scrollTop: windowHeight +'px' 
     }, "slow"); 
     console.log('image - true'); 
    }); 

    $('div.about').height(windowHeight); 

    //nav 
    $('div.nav > li').on('click', function() { 

    }); 
    //resize 
    $(window).resize(function() { 
     windowWidth = $(document).width(); 
     windowHeight = $(document).height(); 

     $('div.head').height(windowHeight); 
     $('div.about').height(windowHeight); 
    }); 
}); 

问题是当前发生的事情是，当浏览器/网页调整它然后使当前高度加倍，而不是将它设置到新的高度。为什么会这样呢？

Answer 1

document！= window，你document（作为页面的最高结点表示）包括.head和.about，因此它不会给你一个屏幕高度，但页面的所有渲染的元素的高度。

... 
$(window).resize(function() { 
    windowWidth = $(window).width(); 
    windowHeight = $(window).height(); 

    $('div.head').height(windowHeight); 
    $('div.about').height(windowHeight); 
}); 

顺便说一句，你可以这样做，而不使用jquery所有，只是添加到您的css：

.head, .about { 
    width: 100%; 
    height: 100%; 
}