使用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页面的高度

回答

相关问题