outerHeight（true）给出错误的值

Question

我想要一个容器元素的高度，包括边距和填充。

当我将鼠标悬停在Chrome开发工具中的元素上时，我得到了我正在寻找的值，但是当我使用jQuery $('element').outerHeight(true)时;我得到的价值要小得多。

该元素包含一个jQuery轮播（在一个容器中有position:relative和项目position: absolute），这可能与它有关吗？

提前致谢

Answer 1

我已多次遇到过这个问题，没有使用任何插件或unruly setTimeout函数的最佳解决方案是使用hook进入浏览器的onLoad事件。使用jQuery，它是这样完成的：

$(window).load(function(){ ...outerHeight logic goes here... });

这可能与您的标准$(function(){ ...code... });完全分开，因此所有其他正常工作的代码都不必等到页面上的每个元素都加载完毕。

为什么会出现这种情况： Chrome具有与Firefox不同的渲染算法，这使得它在页面上的所有元素完全绘制/显示之前触发onLoad事件，并且可供jQuery选择和检索高度。 setTimeout()大部分时间都会工作，但是你不想依赖于那些天生就是盲目的东西 - 谁知道，将来这个Chrome中的“怪癖”可以修复！ :)

Answer 2

有点破解。将代码放在jquery中加载，滚动和调整大小函数，如下所示：

$(window).on('load scroll resize', function(){
    //outerHeight code
});

Answer 3

我有同样的问题。我使用setTimeout稍等一下，在Chrome中获得正确的高度：

    setTimeout ( function () {
        var ht = $('.my-class').outerHeight( true );
    }, 1);

我希望有所帮助！

Answer 4

我遇到了同样的问题。

Firefox外部高度通过console.log：430 Chrome外观高度通过console.log：477

真正的外部高度（萤火虫布局）：820

打开Firebug或删除状态栏后，它在console.log中设置了正确的值（820）（因此代码可以正常工作）。

问题是由于图像。即使您在准备好文档时运行它，也不是所有图像都可能已加载，因此计算错误。

我正在使用desandro的插件，它解决了我的问题。 https://github.com/desandro/imagesloaded

Answer 5

我想你可能需要

.outerHeight({margin: true});

根据here：

可以通过传递边距设置为true的选项图来包含边距。

Answer 6

对我来说应该完全正常工作的是@Matt Reilly和@Lasha答案的组合

$(window).load(function() {
    setTimeout(function() {
        // all the logic in here
    }, 1);
});

我曾经把代码放在$(document).ready(function(){...});中，但它有时会变得有些，所以上面的工作完美无缺。

Answer 7

如果窗口已加载并且文档已准备好并且您已经考虑了浮动并且仍然遇到此问题，那么请考虑查找具有相同ID的元素。确保使用jQuery选择器获得正确的元素。我忘了我在dom中有另一个元素与完全相同的id。考虑使用jQuery更改背景颜色以进行验证。

Answer 8

尝试了这些解决方案中的每一个。终于打开检查员，意识到我的p仍然有一个margin-top。一如既往地感谢Normalize ......

Answer 9

使用outerHeight不能正确考虑内部隐藏，固定和绝对元素。

试试scrollHeight属性：

$('element').prop('scrollHeight')

Answer 10

According to the docs，outerHeight在以下情况下不保证准确：

• 页面被缩放
• 隐藏元素或其父元素