Как получить высоту самого высокого дочернего элемента в javascript / jQuery?

Мне нужна функция, чтобы получить высоту самого высокого элемента внутри div.

У меня есть элемент со многими другими внутри (динамически генерируемый), и когда я запрашиваю высоту элемента контейнера с помощью $ (elem) .height (), я получаю меньшую высоту, чем некоторые из содержимого внутри него. Некоторые из элементов внутри являются изображениями, размер которых превышает размер этого элемента.

Мне нужно знать самый высокий элемент, чтобы получить его высоту.

Ответы на вопрос(4)

чем его дети, вероятно, дети плавают. Можете ли вы позволить 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>

Или примените Clearfix CSS решение, чтобы сделать почти то же самое, но без лишней разметки или очистки div.

Содержащий div тогда получит ту же высоту, что и самый высокий дочерний элемент, и вы можете получить его:

$("#someParent").height();
 oldwizard12 мая 2015 г., 07:42
Как бы$("#someParent").height() дать сумму роста двух из трех детей? В этом примере всегда будет указана высота дочернего элемента с наибольшей высотой из-за очищающего элемента. Какое отношение имеет к этому ширина детей? Попробуйте это в браузере. Этот ответ был дан 6 лет назад, с тех пор многое произошло. Flexbox - гораздо более простой способ, если вы можете отказаться от поддержки <IE9.
 Szymon Dziewoński11 мая 2015 г., 22:26
что если будет 3 элемента с шириной: например, 50%, то высота родителя будет первой, а сумма высоты третьего элемента. Так что ваш ответ неверен
 Szymon Dziewoński12 мая 2015 г., 13:10
Чувак, подумай еще раз: 3 элемента 50%, тогда высота parent - это сумма первого и третьего элементов (если float left), ну, это довольно просто ..

который кажется более прямым и коротким наhttp: //css-tricks.com/snippets/jquery/equalize-heights-of-div

var maxHeight = 0;

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

$(yourelemselector).height(maxHeight);
 Notflip04 мар. 2015 г., 15:36
это должен быть принятый ответ
Решение Вопроса

Ты всегда можешь сделать:

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

Отредактировано, чтобы оно снова заработало.

 John Fisher02 июл. 2009 г., 21:32
Возможно, вы захотите использовать externalHeight () вместо height ().
 Thomas19 июн. 2011 г., 15:33
@ Дэвид Райдер:elem не определено, потому что это элемент, который вы тестируете. Вместо elem вы вводите имя фактической переменной, содержащей элемент, который вы хотите протестировать. Что касаетсяouterHeight() Скорее всего, что-то изменилось, так как я ответил на это. Я отредактирую ответ, чтобы он заработал.
 David Ryder18 июн. 2011 г., 12:13
elem не определен t_elem.outerHeight () не является функцией Вы проверяли это?
 RaphaelDDL30 дек. 2011 г., 17:31
@ Thomas спасибо, парень, тоже искал это. Старый, но золотой ответ. Как предложение, вы можете добавить комментарий послеt=$this.outerHeight(); чтобы новички могли понять, чтоt является окончательным значением, и он может использовать любое значение со значением (например,something.height(t+'px') илиsomething.animate( etc );
 Leandro Ardissone02 июл. 2009 г., 21:37
Отлично, спасибо, ребята!

поэтому я заставил его работать с изменением размера окна.

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

Надеюсь, это кому-нибудь поможет!

Счастливые парни! :)

Ваш ответ на вопрос