问题标签 [outerheight]

我在 DOM 中添加了一个块级元素，比如一个p标签。它的尺寸应该是自动计算的（例如自动）。但是，至少在最初，我不能用 jQuery 检索它的高度。过了一段时间（大概已经发生了一些布局处理），我可以检索高度。

为了使一个元素真正可测量，除了将其添加到 DOM 之外，为了使其计算出的高度可检索，必须发生什么？

具体来说，我有一个select元素，其中包含一些option元素，每个元素都附加了图像 URL 数据。我调用了一个图像选择器插件，它读取option标签数据，隐藏select元素，并将选项转换为一个容器，其中的div元素如下所示：

所以我有一个固定宽度的容器，它将以 33.33% 的宽度填充 div 元素（产生 3 列）。这些 div 中的每一个都代表转换后的选项元素之一。在其中的每一个中，都有一个 100% 宽度的 div 元素，其中包含一个imgandp标记。

此外，我正在使用 imagesLoaded 插件和 masonry 插件来布置图像。在加载每个图像后运行的 imagesLoadedprogress事件中，我可以清楚地看到img元素具有非零高度和宽度。然而，它的容器没有，p标签也没有。

唯一可能发生的特殊情况是，在使用图像选择器插件创建元素后，我立即使用 分离它们$('.convertedOptionElement').detach()，然后在加载每个图像时触发的 progressfor 事件中imagesLoaded，我将它们附加到容器并调用masonry.appended 方法以执行布局。这就是问题出现的地方，因为尽管所有内容都在 DOM 中，但计算出的高度为零。

请注意，即使我提供了精确的宽度（例如 250px 而不是 33.33% 和 100%），然后在同一个加载的事件处理程序中，我通过计算现有图像尺寸的缩放高度来明确设置 jQuery 中的宽度和高度（即所有父元素都有明确的大小）...段落标签的高度仍然为零。

这是我的代码，但这是有效的。它在我使用的确切上下文中不起作用，我不知道为什么。http://jsfiddle.net/p7cgahro/7/

我遇到了 window.outerHeight 的问题。

在移动设备上的 Safari 浏览器上运行时返回 0。我已经在 Android (Chrome) 上对其进行了测试，它运行良好。

我在iOS9上。

我想知道旧设备是否支持解决方案或替代方案。

这不是时间问题。

在您的 iPhone 上打开以下内容：http: //jsfiddle.net/hfq0Ly1w/

通过在此处检查手机上的高度属性，您可以看到 Safari 上有很多错误：

http://ryanve.com/lab/dimensions/

干杯!

如果我做

在 Chrome 中，我得到了旧的外部高度。

我要做

相反（或者，当然，任何产生类似效果的东西）来outerHeight报告“正确的”高度（我希望这是我们在改变后可以看到的持续真实高度min-height）。

不幸的是，setTimeout这不是我的选择。我可以用什么代替？它应该适用于所有主要浏览器（当前版本）。

我想将一个 div 的 outerheight() 值与另一个 div 的 padding-top 值相加。这是我的功能

结果是：

我需要的结果当然是 474 + 150 = 624px; 我通常很容易总结东西，我不确定为什么会发生这种情况以及我做错了什么。非常感谢任何帮助。

我在一个页面上有两个并排的元素。一个元素具有固定大小 (100vh) - .hero-half - 另一个元素具有可变长度的文本 - .project-details。当流体文本容器扩展为高于图像容器时，我想对其应用一个类，将其子元素之一的高度限制为将总文本容器高度重新与图像高度相等。

HTML：

相关的CSS：

这是我的 JS 代码：

因此，当 project-details div 的高度高于 .hero-half 时，它会添加一个为其中一个孩子设置 max-height 的类，这会使 .project-details 的总高度回到等于或小于 .英雄一半。

但是，当我调整窗口大小以强制文本将项目详细信息高度推得太高并触发限制高度类时，它仅在屏幕宽度和高度加起来为偶数时才有效（宽度和高度都是偶数，或两者都是奇数）。如果总数是奇数，则项目详细信息的 outerHeight 似乎计算不正确。

我认为，问题在于 .project-details 的 outerHeight 有时是在它限制的文本高度之前的自然高度计算的，有时它是在应用该类之后和限制的文本高度之后计算的，因此将 .project-details 高度降低到可接受的范围内。

我尝试为添加类添加超时延迟，希望额外的时间意味着 outerHeight 计算始终正确，但这并没有什么不同。

我应该如何更改此 JS 代码以确保 .project-details outerHeight 始终在应用 restrict-height 类之前读取高度？

和相关：为什么奇数像素尺寸在这里有任何影响？

我试图通过计算父元素和子元素的宽度和高度差异以及使用差异作为边距或填充来在其父元素中横向和垂直居中。

我正在使用这个公式计算必要的空间：

然后，我使用一个函数循环一个方向数组，该函数允许我使用函数参数更改应用于子元素的 css。基本上，该功能允许我选择是否要使用边距或填充。

问题

虽然我的代码返回顶部、右侧、左侧和底部的预期值，但它不使用填充来实现吗？知道是什么原因造成的吗？

HTML

CSS

JAVASCRIPT

CODEPEN 链接-链接

我正在尝试编写一些 JavaScript 代码，允许我使用填充在其父元素中居中一个子元素。然后使用相同的函数使用“resize”事件重新计算间距。在你开始问我为什么不使用 CSS 做这件事之前，这段代码只是一个大项目的一小部分。我已经简化了代码，因为其余代码都可以工作，只会混淆主题。

计算空间- 这是计算子元素任一侧要使用的空间量的函数。

问题

尽管我已经成功地通过保证金获得了预期的结果。填充给我带来了问题。

1. 调整大小时似乎增加了外部元素的宽度
2. 它不能完美地居中子元素（似乎有偏移）
3. 内部元素在调整大小时折叠并变得不可见。

我意识到可能有一些关于填充的基本原理会导致我的问题，但是在大量控制台日志和观察返回的数据之后，我仍然无法解决问题。任何建议都会非常受欢迎。事实证明，这根本不可行。

HTML

CSS

JAVASCRIPT

示例-链接

我正在研究适应电子学习框架，我正在尝试垂直居中对齐通知弹出（div）。为此，我通过 js 设置了上边距，这需要 notify-popup 的高度，所以我使用$('.notify-popup').height(true). 第一次加载时，它返回高度“x”，但如果我再次调用该函数而不重新加载页面，那么它返回新高度，并在其上添加 16px“x+16”。包括我使用的所有填充和边距，outerHeight(true)但它也不起作用。jquery 的 height() 方法是否在页面预渲染期间在计算高度时排除或遗漏了某些内容？它在页面初始渲染后调用 resetNotifySize 函数返回正确的高度。

谷歌搜索说 window.outerWidth 和 window.outerHeight 将返回当前窗口的外部尺寸。但是，我在 IE11 中打开的 HTA 文件为这些属性提供了“未定义”。我究竟做错了什么？

警报对话框显示“W = 未定义，H = 未定义”（该死）。

I have two columns each with two overlapping divs. If you click the front div, it fades out and the back div appears.

Then the back div has to set it's height to auto if it has overflowing content and remain it's height when it doesn't. The wrapper (.thumb) also changes height depending on the back div's height.

The code inside the if statement works, but it doesn't seem to check the condition. It also executes the code when the content doesn't overflow the div, so it sets height to auto here as well, making the div smaller. I want the div without overflow to keep its original height.

I put the heights of both the outerHeight and scrollHeight to the console to check which heights it reads. The div without overflow says its outerheight is bigger than scrollHeight, so it should not execute the if statement. I put the else statement in there to check if it executes the console.log(), but it doesn't.

I don't understand what's wrong with my code. Here is je JSfiddle: https://jsfiddle.net/Isoldhe/5scfqzzh/33/

HTML:

CSS:

JS: