Javascript高度和不匹配

Question

我有一个div，绝对定位，最初不可见，它显示在一个被单击的元素的位置上，呈现它的预览(预览的顶部位置线到被单击的元素的顶部)。当被单击的元素定位在较低的位置时，预览将呈现在原始页面边框的下方，因此需要滚动。我想将预览向上移动，使其底部边缘位于上一页的底部限制上。问题是我使用的代码没有返回预期的页面高度(它大于预览高度和点击元素顶部位置的总和)。

代码如下:文件1：

jQuery('elementClicked').live('click',function(){
...
jQuery("previewDiv").setTopAtClickedElement(jQuery(this));
...

}

文件2：

jQuery.fn.setTopAtClickedElement = function (element) {
//original positioning    
this.css('top', element.offset().top + 'px');

// the troublesome part where the eventual correction should be done
if (element.offset().top + this.height() > jQuery(document).height())
{
    this.css('top', jQuery(document).height() - this.height() + 'px');
}

}

当我使用Math.max(document.body.scrollHeight，document.body.offsetHeight，document.documentElement.clientHeight，document.documentElement.scrollHeight，document.documentElement.offsetHeight)作为a link上建议的文档高度度量时，也会发生类似的情况

你对我应该如何实现代码的这个麻烦部分有什么建议吗？

如果我说得不够清楚，请告诉我，谢谢

Answer 1

尝试使用jQuery的outer.height() - api docs而不是.height()，它将考虑页面上的任何填充(以及可选的标记)。

jsfiddle或codepen将帮助我们解决您的问题。