jQuery錯誤地計算文檔準備好div高度

Question

我試圖在頁面加載後更改節高度，但它並不總是工作。我知道我的代碼來改變高度是好的，它適用於窗口調整大小，只是在document.ready並不總是工作後的初始調用。

var $window = $(window); 

function wrap_element_link_mobile(object, path) { 
    if ($(this).width() < 921 && !object.parent().is('a')) { 
     object.wrap("<a href='" + path + "'></a>"); 
    } else if ($(this).width() > 920 && object.parent().is('a')) { 
     object.unwrap(); 
    } 
} 

function resize_section() { 
    var sectionMinHeight = $(window).height() - $('header').height() - $('footer').height() - 7; 
    $('section').css('min-height', sectionMinHeight); 
} 

/* Called after document Load 
================================ */ 

$(document).ready(function() { 
    var $mainLogo = $('#main-logo'); 

    wrap_element_link_mobile($mainLogo, '/'); 
    resize_section(); 

    $window.resize(function() { 
     wrap_element_link_mobile($mainLogo, '/'); 
     resize_section(); 
    }); 
}); 

在初始調用中創建console.log後，我發現它正在調用，但由於某種原因，它不工作。

*編輯的我所看到的

通知滾動條屏，它消失了，如果我調整窗口，在所有的雖然是適當的高度。

http://jsfiddle.net/QHSm3/6/

Answer 1

的問題是與樹的標誌！ ！以下是發生的情況：

您沒有在圖像上指定寬度和高度。當你這樣做時，瀏覽器假定文檔上的高度爲0px。已經準備好。在document.ready上，腳本計算標題的高度爲60px並立即在節上設置最小高度。

當圖像加載時，標題的高度變爲101px;在這一點上，內容（頁眉，節，頁腳）增長41px，因此滾動條。

如果從緩存中加載圖像，結果可能會不同。

你有三個選項：

1：在HTML源中指定的圖像尺寸：

<img alt="Tree Logo" id="main-logo" src="logo.png" width="83" height="101"/> 

Demo here，似乎工作。

2：計算window.load上的高度而不是document.ready。

3.更好的是，使用CSS sticky footer（除非我誤解你正在嘗試做什麼）。

Answer 2

這將是我的純HTML/CSS嘗試。

http://jsfiddle.net/QHSm3/10/

section.pages { 
    position: fixed; 
    bottom: 0; 
    left: 0; 
    top: 102px; 
    right: 0; 
    overflow: auto; 
} 

我知道這並不直接回答你的問題，但我認爲計算器應該表現出正確的道路，我個人覺得，如果有，解決純CSS佈局問題的一種方式，應該這樣做。

編輯： 這裏的另一種嘗試，它涉及鈣：

http://jsfiddle.net/QHSm3/11/

section.pages { 
    position: absolute; 
    left: 0; 
    top: 102px; 
    right: 0; 
    min-height: calc(100% - 123px); 
} 

請注意，這將讓IE8背後：http://caniuse.com/#search=calc