22

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

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

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

提前致谢

4

11 回答 11

36

我已经多次遇到这个问题，最好的解决方案是在不使用任何插件或不规则的 setTimeout 函数的情况下，使用 hook 到浏览器的 onLoad 事件中。使用 jQuery，它是这样完成的：

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

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

首先为什么会发生这种情况：
Chrome 的渲染算法与 Firefox 不同，这会导致它在页面上的所有元素完全绘制/显示并可供 jQuery 选择和检索高度之前触发 onLoad 事件。setTimeout()大部分时间都可以工作，但你不想对天生如此盲目的东西产生依赖——谁知道呢，将来 Chrome 中的这个“怪癖”可能会被修复！:)

于 2014-01-14T21:45:18.277 回答
9

我有同样的问题。通过使用setTimeout稍等片刻，我在 Chrome 中获得了正确的高度：

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

我希望这会有所帮助！

于 2013-02-18T06:57:52.997 回答
6

I've run into same problem.

Firefox outerheight via console.log: 430 Chrome outerheight via console.log: 477

Real outerheight (firebug layout): 820

After opening Firebug or removing statusbar it sets correct value (820) in console.log (and hence the code works as it should).

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

于 2013-02-03T11:15:35.763 回答
4

我想你可能需要

.outerHeight({margin: true});

按照这里：

可以通过将边距设置为 true 的选项映射来包含边距。

于 2012-04-22T14:45:12.563 回答
3

对我来说完全正确的工作是@Matt Reilly 和@Lasha 答案的结合

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

我曾经把代码放进去，$(document).ready(function(){...});但有时它会变得古怪，所以上面的工作完美。

于 2016-05-27T22:41:04.327 回答
2

内部隐藏、固定和绝对元素没有使用 outerHeight 正确计算。

试试 scrollHeight 属性：

$('element').prop('scrollHeight')
于 2017-10-31T12:59:11.830 回答
0

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

于 2015-07-07T16:32:59.957 回答
0

一个小技巧。将代码放在 jquery 的加载、滚动和调整大小函数中，如下所示：

$(window).on('load scroll resize', function(){
    //outerHeight code
});
于 2018-09-13T12:08:43.027 回答
0

尝试了这些解决方案中的每一个。最后打开检查器，发现我p还有一个margin-top. 一如既往地感谢规范化...

于 2016-02-24T05:50:43.043 回答
0

如果您按类选择，您可以一次选择多个元素，如果第一个元素的高度错误，它将是您使用 outerHeight() 获得的高度（这是我个人的问题）

于 2021-03-31T18:49:47.850 回答
0

根据文档，outerHeight不能保证在以下情况下准确：

  • 页面被缩放
  • 元素或其父元素被隐藏
于 2018-04-21T21:16:45.763 回答