jquery - 使用.height（）

Question

我正在使用jquery .height（）来获取文档高度。

请检查该 http://jsfiddle.net/rkumarnirmal/86q37/

获取的高度后，我将在该位置的元素。在哪里可以看到文档高度实际上是错误的，因为它超出了该区域。

我该如何解决这个问题？

谢谢！

Answer 1

top相对于#dummy的顶部。

所以，你需要从页面的高度减去#dummy的高度：

$(function(){ 
    var h = $(document).height() - $("#dummy").height(); 
    $("#dummy").css("top", h+"px"); 
})​ 

我应该指出，虽然你可以在纯CSS做到这一点：

http://jsfiddle.net/86q37/3/

如果你想要支持旧浏览器，你可能需要查找一些CSS技巧来做到这一点，或者只是坚持使用JS。

Answer 2

.height正在返回正确的值。但是您将箱子的顶部位置设置为文档的高度。请参见下面的演示更好地理解，

$(function(){ 
    var h = $(document).height(); 
    $("#dummy").css("top", function() { 
     return (h - $(this).height()) +"px"; 
     //This will place the box at top position subtracting 
     //the documentHeight - dummyHeight; 
    }); 
}) 

DEMO

Answer 3

一种解决方案是使用jQuery，并从身体的高度中减去元素的高度（和你不需要担心有关将px的高度，jQuery的处理它内部）：

$(function(){ 
    var h = $(document).height(); 
    $("#dummy").css("top", h - $('#dummy').height()); 
})​ 

JS Fiddle demo。

的容易的解决方案就是使用CSS：

#dummy { 
    position: absolute;    
    width: 100px; 
    height: 100px; 
    bottom: 0; /* aligns the bottom of the element zero pixels from the bottom of the document */ 
    left: 0; /* aligns the left side of the element zero pixels from the left side of the document */ 
    background-color: red; 
}​ 

JS Fiddle demo。