我想要容器元素的高度，包括边距和内边距。
当我将鼠标悬停在 Chrome 开发工具中的元素上时，我得到了我正在寻找的值，但是当我使用 jQuery $('element').outerHeight(true);我得到的值要小得多。
该元素包含一个 jQuery 轮播（在带有 position:relative 和项目 position: absolute 的容器中），这可能与它有关吗？
提前致谢
【问题讨论】：
.outerHeight({margin: true});
标签： jquery positioning dimensions
如果您按类选择，您可以一次选择多个元素，如果第一个元素的高度错误，它将是您使用 outerHeight() 获得的高度（这是我个人的问题）
【讨论】：
一个小技巧。将代码放在 jquery 的加载、滚动和调整大小函数中，如下所示：
$(window).on('load scroll resize', function(){
//outerHeight code
});
【讨论】：
According to the docs、outerHeight 在以下情况下不保证准确：
【讨论】：
内部隐藏的、固定的和绝对的元素没有使用 outerHeight 正确计算。
试试 scrollHeight 属性：
$('element').prop('scrollHeight')
【讨论】：
我已经多次遇到这个问题，最好的解决方案是在不使用任何插件或不规则的 setTimeout 函数的情况下，使用 hook 到浏览器的 onLoad 事件中。使用 jQuery，它是这样完成的：
$(window).load(function(){ ...outerHeight logic goes here... });
这可能与您的标准 $(function(){ ...code... }); 完全分开，因此您所有其他正常工作的代码都不必等到页面上的每个元素都加载完毕。
首先为什么会发生这种情况：
Chrome 的渲染算法与 Firefox 不同，这会导致它在页面上的所有元素完全绘制/显示并可供 jQuery 选择和检索高度之前触发 onLoad 事件。 setTimeout() 大部分时间都可以工作，但你不想对天生如此盲目的东西产生依赖——谁知道呢，将来 Chrome 中的这个“怪癖”可能会得到解决！ :)
【讨论】：
对我来说完全正确的是@Matt Reilly 和@Lasha 答案的结合
$(window).load(function() {
setTimeout(function() {
// all the logic in here
}, 1);
});
我以前将代码放在$(document).ready(function(){...}); 中，但有时它会变得古怪，所以上面的代码可以完美运行。
【讨论】：
尝试了这些解决方案中的每一个。最后打开检查器并意识到我的p 仍然有一个margin-top。一如既往地感谢 Normalize...
【讨论】：
如果窗口已加载并且文档已准备好，并且您已经考虑了浮动，但您仍然遇到此问题，那么请考虑寻找具有相同 id 的元素。确保您使用 jQuery 选择器获得了正确的元素。我忘了我在 dom 中有另一个具有完全相同 id 的元素。考虑使用jQuery改变背景颜色来验证。
【讨论】：
我遇到了同样的问题。我通过使用 setTimeout 在 Chrome 中获得正确的高度来等待一下：
setTimeout ( function () {
var ht = $('.my-class').outerHeight( true );
}, 1);
希望对你有帮助！
【讨论】：
我也遇到了同样的问题。
通过 console.log 的 Firefox 外部高度：430 通过console.log的Chrome外高：477
实际外高（萤火虫布局）：820
在打开 Firebug 或删除状态栏后，它会在 console.log 中设置正确的值 (820)（因此代码可以正常工作）。
问题是由图像引起的。即使您在准备好文档时运行它，也可能尚未加载所有图像，因此计算是错误的。
我正在使用 desandro 的插件，它解决了我的问题。 https://github.com/desandro/imagesloaded
【讨论】：
#container img { max-width: 100%; }。这意味着，溢出容器的图像导致了问题。
【讨论】：