jQuery externalHeight(true) 给出错误的值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10268892/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
outerHeight(true) gives wrong value
提问by Viktor
I want the height of a container element, including margins and paddings.
我想要一个容器元素的高度，包括边距和填充。
When I hover over the element in Chrome development tool, I get the value that I'm looking for but when I use jQuery $('element').outerHeight(true); I get a much smaller value.
当我将鼠标悬停在 Chrome 开发工具中的元素上时，我得到了我正在寻找的值，但是当我使用 jQuery 时$('element').outerHeight(true)；我得到的值要小得多。
The element contains a jQuery carousel (in a container with position:relativeand items position: absolute), could that have something to do with it?
该元素包含一个 jQuery 轮播（在一个容器中，包含position:relative和 items position: absolute），这可能与它有关吗？
Thanks in advance
提前致谢
回答by Lasha
I have experience this issue several times, and the best solution, without the use of any plugins or unruly setTimeout functions, is to use hook into the browser's onLoad event. With jQuery, it's done like so:
我多次遇到过这个问题，最好的解决方案是在不使用任何插件或不守规矩的 setTimeout 函数的情况下，使用钩子到浏览器的 onLoad 事件。使用 jQuery，它是这样完成的：
$(window).load(function(){ ...outerHeight logic goes here... });
$(window).load(function(){ ...outerHeight logic goes here... });
This could be totally separate from your standard $(function(){ ...code... });so all of your other properly working code doesn't have to wait until every single element on the page has loaded.
这可能与您的标准完全分开，$(function(){ ...code... });因此您所有其他正常工作的代码不必等到页面上的每个元素都加载完毕。
Why this happens in the first place:
Chrome has a different rendering algorithm than Firefox, which causes it to trigger the onLoad event before all the elements on the page are completely drawn/displayed and available for jQuery to select and retrieve heights. setTimeout()will work most of the time, but you don't want to develop a dependency on something so blind by nature – who knows, in the future this "quirk" in Chrome could be fixed! :)
首先为什么会发生这种情况：
Chrome 具有与 Firefox 不同的渲染算法，这导致它在页面上的所有元素完全绘制/显示并可供 jQuery 选择和检索高度之前触发 onLoad 事件。setTimeout()大多数情况下都可以使用，但您不想依赖于天生如此盲目的东西——谁知道呢，未来 Chrome 中的这个“怪癖”可能会得到修复！:)
回答by Matt Reilly
I had the same problem. I get the correct height in Chrome by using setTimeoutto wait a bit:
我有同样的问题。通过使用setTimeout稍等片刻，我在 Chrome 中获得了正确的高度：
setTimeout ( function () {
var ht = $('.my-class').outerHeight( true );
}, 1);
I hope that helps!
我希望这有帮助！
回答by Zoran P.
I've run into same problem.
我遇到了同样的问题。
Firefox outerheight via console.log: 430 Chrome outerheight via console.log: 477
通过 console.log 的 Firefox 外部高度：430 通过 console.log 的 Chrome 外部高度：477
Real outerheight (firebug layout): 820
真实外部高度（萤火虫布局）：820
After opening Firebug or removing statusbar it sets correct value (820) in console.log (and hence the code works as it should).
打开 Firebug 或删除状态栏后，它会在 console.log 中设置正确的值 (820)（因此代码可以正常工作）。
The issue was due to images. Even though you are running it on document ready, not all images might be loaded yet, and therefore the calculations are wrong.
问题是由于图像。即使您在文档就绪时运行它，也可能尚未加载所有图像，因此计算是错误的。
I am using desandro's plugin and it has fixed my issue. https://github.com/desandro/imagesloaded
我正在使用 desandro 的插件，它解决了我的问题。 https://github.com/desandro/imagesloaded
回答by Elliot Bonneville
回答by ctf0
the one that worked exactly as it should for me was a combine of both @Matt Reilly & @Lasha answers
对我来说完全按照应有的方式工作的是@Matt Reilly 和@Lasha 答案的结合
$(window).load(function() {
setTimeout(function() {
// all the logic in here
}, 1);
});
i used to put the code in in $(document).ready(function(){...});but it gets wanky sometimes so the above works perfectly.
我曾经把代码放进去，$(document).ready(function(){...});但有时它会变得古怪，所以上面的工作很完美。
回答by Rob
Inner hidden, fixed and absolute elements are not properly accounted for using the outerHeight.
内部隐藏元素、固定元素和绝对元素未正确使用外层高度进行计算。
Try the scrollHeight property:
试试 scrollHeight 属性：
$('element').prop('scrollHeight')
回答by StoriKnow
According to the docs, outerHeightisn't guaranteed to be accurate when:
根据文档，outerHeight在以下情况下不能保证准确：
- the page is zoomed
- the element or its parent is hidden
- 页面被放大
- 元素或其父元素被隐藏
回答by CalebOkai
A little hack. Place the code inside jquery's on load, scroll and resize functions like this:
一个小黑客。将代码放在 jquery 的加载、滚动和调整大小函数中，如下所示：
$(window).on('load scroll resize', function(){
//outerHeight code
});
回答by user3338098
If the window is loaded and the document ready and you have accounted for floats and you still get this issue then consider looking for an element with the same id. Be certain you are getting the right element with your jQuery selector. I forgot I had another element in the dom with the exact same id. Consider using jQuery to change the background color to verify.
如果窗口已加载且文档已准备好，并且您已经考虑了浮动，但您仍然遇到此问题，则考虑寻找具有相同 id 的元素。确保您使用 jQuery 选择器获得了正确的元素。我忘了我在 dom 中有另一个具有完全相同 ID 的元素。考虑使用jQuery改变背景颜色来验证。
回答by corysimmons
Tried every single one of these solutions. Finally opened up inspector and realized my pstill had a margin-top. As always thanks Normalize...
尝试了这些解决方案中的每一个。终于打开了检查器，发现我p还有一个margin-top. 一如既往地感谢标准化...
