jquery $（window）.height（）和$（document）.height（）返回相同的

我需要我的背景圖像低於我的菜單div。因此，不是將背景應用到body元素，而是將其放入另一個包含我的body div的bg div中，並將寬度設置爲100％（我的body div具有指定的寬度）。我在bg div中設置背景。

我測試了它，因爲文檔不夠長，我得到了一半的背景圖片。所以我試圖爲此做一個JavaScript修復。

<!DOCTYPE HTML> 
..... 
<script type="text/javascript" src="jquery-min.js"></script> 
<script type="text/javascript"> 
function setDocumentSize() { 
    alert($(window).height()); 
    alert($(document).height()); 
    if ($(window).height()>$(document).height()) { 
     var height = $(window).height()-$(document).height(); 
     document.getElementById('bg').style.height=height+"px" 
     } 
    } 
..... 
</script> 
..... 
<body onload="setDocumentSize()"> 
<div class="menu"> 
..... 
</div> 
<div class="bg"> 
    <div class="body"> 
    .....(background in this div) 
    </div> 
</div>

現在兩個警報都會彈出視口高度。因此沒有任何反應

我使用的是Firefox 16.0.2

這裏是一個實際的頁面http://servapps.dyndns-work.com/abstract/

來源

2013-04-29 serv92

當你的文檔沒有超出窗口（沒有滾動條）他們顯示相同。當你最小化你的窗口到點滾動條彈出並刷新你的頁面，你可能會得到線索.. :-) – Daniel 2013-04-29 05:51:40

爲什麼不只是使用最小高度的圖像高度的背景div？ – VictorKilo 2013-04-29 05:51:55

這一個環節可以用CSS來實現。您需要確保所有包含的元素至少是頁面的高度（height: 100%）。這包括html和body元素。

此代碼應與網站合作：

html, body, #bg { 
    height: 100%; 
}

來源

2013-04-29 06:02:23

還有一個原因，這可能會失敗是DOCTYPE聲明（<!DOCTYPE html>）丟失時。添加此項可修復$(window).height()以返回正確的視口高度。

來源

2013-11-25 07:37:00 Thava

謝謝！我真的瘋了！我不知道爲什麼這樣？有人有線索嗎？ – 2015-01-08 19:50:41

jquery $（window）.height（）和$（document）.height（）返回相同的

回答

相關問題