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

Question

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

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

我需要知道最高的元素，以便可以获取它的高度。

- Leandro Ardissone

Answer 1

我发现这段代码更加直观和简短，可以在 http://css-tricks.com/snippets/jquery/equalize-heights-of-divs 找到。

var maxHeight = 0;

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

$(yourelemselector).height(maxHeight);

- gebeer

Answer 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();
    }
});

编辑以使其再次正常工作。

- Thomas

---

你可能想使用outerHeight()而不是height()。 - John Fisher

elem未定义 t_elem.outerHeight()不是一个函数你测试过这个吗？ - David Ryder

@David Ryder：elem未定义，因为它是您要测试的元素。 您应该放入实际保存要测试的元素的变量的名称，而不是 elem。 至于 outerHeight()，很可能自我回答以来出现了一些更改。 我将编辑答案使其正常工作。 - Thomas

@Thomas 谢谢你，正需要这个呢。虽然旧了点但确实经典的回答。作为建议，你可以在 t=$this.outerHeight(); 后面加上一些注释，这样新手也能理解 t 是最终值，可以将其与想要的值一起使用（如 something.height(t+'px') 或 something.animate( etc );）。 - RaphaelDDL

我还是不明白elem这个东西，我尝试过$("*","#headline").each(function () {但是那行不通，能否给一个更具体的例子？ - clankill3r

@clankill3r：你的问题在于你正在使用字符串作为元素。元素必须是DOM元素本身。在你的情况下，最简单的方法是使用$("*", document.getElementById("headline"))。 - Thomas

Answer 3

如果 div 元素比其子元素要小，那么子元素可能是浮动的。您可以让 div 元素与子元素一样大吗？

如果可以，请在底部添加清除元素以使 div 元素包裹其子元素：

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

或者应用清除浮动的CSS解决方案，实现类似的效果但不需要额外的标记或清除div。

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

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

- oldwizard

---

如果有三个宽度为50%的元素，那么父元素的高度将是第一个和第三个元素高度之和。因此，你的答案是不正确的。 - Szymon

$("#someParent").height()如何给出三个子元素中两个的高度总和？在这个例子中，由于清除元素，它总是会给出具有最大高度的子元素的高度。那么子元素的宽度与此有什么关系呢？在浏览器中尝试一下。这个答案是6年前给出的，自那时以来发生了很多事情。如果您可以放弃对<IE9的支持，flexbox是一个更容易的选择。 - oldwizard

兄弟，再想一想。3个元素，50%的宽度，然后父元素的高度是第一个和第三个元素的总和（如果浮动在左侧）。嗯，这很简单。 - Szymon

Answer 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');
});

我希望这能对某些人有所帮助！

祝大家编码愉快！ :)

- Cstyves