如何获取 javascript/jQuery 中最高子元素的高度？

Posted 2023-03-06

技术标签:

【中文标题】如何获取 javascript/jQuery 中最高子元素的高度？【英文标题】：How to get height of the highest children element in javascript/jQuery? 【发布时间】：2010-11-07 18:06:26 【问题描述】：

我需要一个函数来获取 div 内最高元素的高度。

我有一个包含许多其他元素的元素（动态生成），当我使用 $(elem).height() 询问容器元素的高度时，我得到的高度比其中的某些内容要小。里面的一些元素是比该元素所说的尺寸更大的图像。

我需要知道最高元素，这样我才能得到它的高度。

【问题讨论】：

【参考方案1】：

我在http://css-tricks.com/snippets/jquery/equalize-heights-of-divs发现了这个sn-p，它看起来更直接更短

var maxHeight = 0;

$(yourelemselector).each(function()
   var thisH = $(this).height();
   if (thisH > maxHeight)  maxHeight = thisH; 
);

$(yourelemselector).height(maxHeight);

【讨论】：

【参考方案2】：

你总是可以这样做的：

var t=0; // the height of the highest element (after the function runs)
var t_elem;  // the highest element (after the function runs)
$("*",elem).each(function () 
    $this = $(this);
    if ( $this.outerHeight() > t ) 
        t_elem=this;
        t=$this.outerHeight();
    
);

经过编辑使其再次工作。

【讨论】：

您可能想要使用 outerHeight() 而不是 height()。 elem 未定义 t_elem.outerHeight() 不是函数你测试过吗？ @David Ryder：elem 未定义，因为它是您正在测试的元素。您输入包含要测试的元素的实际 var 的名称，而不是 elem。至于outerHeight()，自从我回答这个问题后，很可能发生了一些变化。我将编辑答案以使其正常工作。 @Thomas 谢谢伙计，也在寻找那个。古老但黄金的答案。作为建议，您可以在t=$this.outerHeight(); 之后添加一些评论，以便新手可以理解t 是最终值，并且他可以使用任何想要的值（例如something.height(t+'px') 或something.animate( etc ); 我仍然没有得到 elem 的东西，我试过 > $("*","#headline").each(function () 但这不起作用，一个更具体的例子会很好【参考方案3】：

如果 div 元素小于其子元素，则子元素可能是浮动的。可以让 div 像孩子一样大吗？

如果可以的话，在底部添加一个清除元素，让 div 包裹它的子元素：

<div id="someParent">
    <p>test</p>
    <img src="test1.png"  style="float: left" />
    <img src="test2.png"  style="float: left" />
    <div style="clear: both;"></div>
</div>

或者应用clearfix CSS 解决方案来做几乎相同的事情，但没有额外的标记或清除 div。

然后，包含的 div 将获得与最高子元素相同的高度，您可以通过以下方式获得它：

$("#someParent").height();

【讨论】：

如果有 3 个元素的宽度：例如 50%，那么父高度将是第一个和第三个元素的高度总和。所以你的anwser不正确 $("#someParent").height() 如何给出三个孩子中两个孩子的身高总和？由于清除元素，它总是会给出在这个例子中具有最大高度的孩子的高度。孩子的宽度与它有什么关系？在浏览器中尝试。这个答案是 6 年前给出的，从那以后发生了很多事情。如果您可以放弃对的支持，那么使用 flexbox 会更容易。老兄再次认为它是 3 个元素 50% 然后高度父是第一个和第三个元素的总和（如果向左浮动），那很简单..【参考方案4】：

在我的例子中，我必须将它与响应式设计一起使用，所以我让它与窗口大小调整一起使用。

function fixHeight(elem)
    var maxHeight = 0;
    $(elem).css('height','auto');
    $(elem).each(function()
       if ($(this).height() > maxHeight)  maxHeight = $(this).height(); 
    );
    $(elem).height(maxHeight);


$(window).resize(function () 
    fixHeight('.myelement');
);
$(document).ready(function(e) 
    fixHeight('.myelement');
);