問題與設定高度的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%; 
}