jQuery height() 在可见 div 上返回 0 - 为什么？答案

【问题标题】：jQuery height() returns 0 on a visible div - why?jQuery height() 在可见 div 上返回 0 - 为什么？
【发布时间】：2012-02-15 11:30:52
【问题描述】：

我有一个高度为 360 像素的容器 (thetext1)。 “thetext1”包含两个 div - 一个在左侧，一个在右侧浮动 - 通过 ajax 调用将内容传递到这两个 div 中。

有时这些 div 中的一个或另一个中的内容会超过 360 像素，因此我想相应地增加 text1 的高度。

我的测试代码

newhgt = $('#thetext1').find('div.rhs').css("background", "pink").height();

返回 0 -（我的选择器是正确的，因为目标 div 是完美的粉红色！）。

这是为什么？我知道 - 从本网站上以前帖子的答案中 - 解决方案是添加溢出：隐藏 thetext1，但我想了解为什么我尝试获取 rhs 和 lhs div 的高度失败。

【问题讨论】：

如果元素是浮动的，您可能需要通过设置溢出来包含它们：隐藏在边界框上或清除下一个元素中的浮动
包含的元素是否都是浮动的（左和右）？您可能必须清除容器上的浮动，以便它实际上包含其子项。
您说内容是通过 ajax 调用传递的。你在 ajax 调用后读取高度吗？
给您带来麻烦的代码的“工作”示例对于正在回答的人来说是一个很大的帮助，这样他们就可以检查实际出了什么问题并找出问题，而不是询问您每一个问题细节。 (jsfiddle.net)

标签： jquery css

【解决方案1】：

确保代码在 $(window).load [不是 $(document).ready ]

$(window).load(function () {
    newhgt = $('#thetext1').find('div.rhs').css("background", "pink").height();
});

【讨论】：

您能否详细说明为什么在这种情况或类似情况下我们会使用 window.load 而不是 document.ready？谢谢！
说实话，我不是 100% 确定。它只是工作。我的猜测是 document.ready 就是这样。文档的元素已下载并且 DOM 已“准备就绪”，而 window.load 表示窗口已加载并已计算尺寸。
@Gazzer .height 在 Opera 和 Chrome 等 webkit 浏览器中为我返回 0。使用 $(window).load(function () { });为我工作。谢谢

【解决方案2】：

我有同样的问题，我注意到一件事，当你调用 .height(); 时，div 需要可见

但是，即使 div 可见，该 div 的父级也需要可见。 因此，您必须保证父 div 可见（显示！= 无）

写一个$('#div').parent().show(); 会使父母可见，你可能需要另一个parent().show();

【讨论】：

我认为这可能是问题所在。但就我而言，我有一个边界框，里面有两个图像。一个很小，在盒子里，它达到了那个高度。但是另一个越过了边界（边界隐藏了溢出）。 0 高度返回那个。获取详细信息时，边界框不显示。所以很难相信会是这样。在执行其他功能之后正确抓取所有高度。

【解决方案3】：

您仍然可以使用 $(document).ready，只要您检查元素是否首先加载。我选择了去

 $("_element name/id_").load(function() {
      $(this).height();
 });

并选择在第一个响应中使用答案。

【讨论】：

请注意，加载事件只能在与 url 关联的元素上处理 - 它不适用于 div，例如：stackoverflow.com/questions/5253821/…。同样对于以后的 jquery，语法已从 .load(handler) 更改为 .on('load', handler)

【解决方案4】：

我这样解决了我的问题：

setInterval(function(){
  alert($("#element").height());
}, 1000);

它对我有用。

【讨论】：

【解决方案5】：

newhgt = $('#thetext1').find('div.rhs').css("background", "pink")[0].getBoundingClientRect().height;

【讨论】：