使用jQuery頁面的高度

什麼是測量整個頁面高度的最佳方式，而不僅僅是一個屏幕。我要問的原因是因爲我需要添加一個覆蓋整個覆蓋它的div。也許我可以測量高度並添加更多的像素以獲得更好的度量？使用jQuery頁面的高度

如果我這樣做，是否有一個更好的方法是正確的方向？對於覆蓋

$('#myOverlay').height($('#myPage').height() + 100) ;

來源

2011-04-20 santa

所以你真正想要的是視口的高度？ – 2011-04-20 15:16:37

http://stackoverflow.com/questions/806402/how-to-get-body-height-using-jquery and http://www.foliotek.com/devblog/finding-real-body-height-using-jquery/:) – 2011-04-20 15:18:37

如果您考慮使用固定位置覆蓋圖而不是絕對位置，則不需要屏幕的高度，但它會一直覆蓋屏幕。試試這裏：http://jsfiddle.net/c4uzQ/9/

.overlay 
{ 
    display: none; 
    position: fixed; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 1000; 
    background-color: #909090; 
    filter: alpha(opacity=50); 
    -moz-opacity: 0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
}

來源

2011-04-20 15:39:16 rucsi

設置寬度和高度是多餘的，或者是否有一個特定的原因，爲什麼你這樣做？ – mekwall 2011-04-20 15:51:22

是的，你說得對。可能根本沒有必要。爲了成爲我，我不記得原因是什麼。可能是一個瀏覽器相關的修補程序，如果有的話我假設遺留的IE，或者我可能已經過於徹底。 ;）畢竟。多多益善... – rucsi 2011-04-20 16:22:13

CSS/HTML方法

如果你想覆蓋到覆蓋另一元素或視它是可行的只使用CSS/HTML，這將是快得多，也適用於瀏覽器即JavaScript被禁用。

CSS例如

通過使用絕對positiion我們可以告訴瀏覽器，以填補整個容器用覆蓋元素，只要容器元素相對定位：

#myPage { 
    position: relative; 
} 

#myOverlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 1000; 
} 

#myOverlay.fixed { 
    position: fixed; 
}

HTML示例

要覆蓋#myPage元素與overl AY（見jsFiddle）：

<div id="myPage"> 
    <p>This will be covered by the overlay</p> 
    <div id="myOverlay"></div> 
</div>

爲了覆蓋整個身體，即視口，把所述覆蓋元件的body結束標記之前右和使用固定的定位（見jsFiddle）：

<body> 
    <div id="myPage"></div> 
    <div id="myOverlay" class="fixed"></div> 
</body>

JavaScript的方法來獲取整個文檔

爲了獲取文檔的整個高度（甚至什麼是視域之外的），你可以使用James Padolseys solution，這是非常簡單，在所有瀏覽器的工作原理：

$.getDocHeight = function(){ 
    return Math.max(
     $(document).height(), 
     $(window).height(), 
     /* For opera: */ 
     document.documentElement.clientHeight 
    ); 
};

來源

2011-04-20 15:18:20 mekwall

+1處理歌劇:) – Anji 2011-04-20 15:24:46

@安吉，積分給詹姆斯的那個;） – mekwall 2011-04-20 15:26:39

您可以嘗試使用：

$(document).height();

沒有時間現在測試，但檢查出來。

來源

2011-04-20 15:18:50

使用jQuery頁面的高度

回答

相關問題