JQuery/JS在瀏覽器和刷新類型之間給出不同的結果

Question

我有一個小的Javascript/JQuery函數，它可以獲取頁面上內容的高度，然後設置中心div的高度以匹配。如果內容不如頁面顯示時間長，那麼它會將div擴展到內容之外，以確保中心div完全覆蓋頁腳。

問題是，它似乎在不同的瀏覽器和取決於刷新類型，併爲我的生活行事不同，我不明白爲什麼。

首先，這裏是代碼：

<script> 
    //sets a minimum height 
    var minHeight = 200; 

    var resizeContent = function(){ 
     //gets the height of the page as a whole, then takes off a little for the header and footer 
     var h = $('body').height() - $('#footer').height() - $('#header').height(); 
     //gets the height of content in the wrapper div, which is directly inside the center div 
     var h2 = $('#wrapper').height() + 30; 
     //gets the height of the 2 sidebar divs 
     var h3 = $('#left').height(); 
     var h4 = $('#right').height(); 

     //compares them all to take the highest one 
     h = h > minHeight ? h : minHeight; 
     h = h > h2 ? h : h2; 
     h = h > h3 ? h : h3; 
     h = h > h4 ? h : h4; 

     //sets the height of the center div 
     $('#content').height(h); 
    } 

    //calls on page load and resize 
    $(document).ready(resizeContent); 
    $(window).resize(resizeContent); 
</script> 

現在它是做什麼如下。

的Internet Explorer
正常的網頁加載 - 做工精細
常規刷新 - 做工精細
移刷新 - 做工精細

火狐
正常的網頁加載 - 做工精細
常規刷新 - 做工精細
Shift Refresh - 內容div比應該是短的

Chrome
正常的網頁加載 - 內容DIV短於它應該是
常規刷新 - 內容DIV短於它應該是
移刷新 - 做工精細

任何人有什麼可能進行的任何想法這裏？

Answer 1

在很多情況下，您需要在onload上調用這些方法。

$(window).load(function(){ 
    resizeContent(); 
}); 

這是因爲如果文檔就緒被調用，除非您在屬性中分配它，否則圖像的大小是未知的。如果您的圖像在加載後不會立即調整大小，這也會影響內容。所以意想不到的高度可能是您的功能的結果。