Matching высоты элементов Jquery/HTML

У меня есть следующий построить в моем HTML-документа:Matching высоты элементов Jquery/HTML

<div class="content"> 
<section class="column"></section> 
<aside class="column"></aside> 
</div>

И я хочу, чтобы соответствовать высоты секции и в сторону на высоту самой высокой из двух. У меня есть следующий сценарий, но он не работает, любые идеи:

function unifyHeights() 
    {  
     var maxHeight = 0;  
     $('div.content').children('.column').each(function(){  
     var height = $(this).outerHeight();  
     if (height > maxHeight) { maxHeight = height; }  
    });  
    $('.column').css('height', maxHeight); 
    }

источник

2010-11-11 Stuart Frisby

ли вы проверить, если что анонимная функция вызывается дважды, с правильными детьми? Вы посмотрели на значения 'height', которые назначены? Увеличивает ли 'maxHeight'? –

похоже, ничего не случилось с го е функция в вашем вопросе, потому что обе колонны получают одинаковую высоту при использовании этой разметки и кода (взятый из вашего примера Pastebin):

<!doctype HTML> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
<script> 
function unifyHeights() 
{  
    var maxHeight = 0;  
    $('div.content').children('.column').each(function(){  
     var height = $(this).outerHeight();  
     if (height > maxHeight) { maxHeight = height; }  
    });  
    $('.column').css('height', maxHeight); 
} 
</script> 
<style> 
.content { 
background-color: yellow; 
} 
section.column { 
    width: 300px; 
    float: left; 
} 
aside.column { 
    width: 300px; 
    floaT: left; 
    display: inline; 
} 
</style> 
</head> 
<body> 
<div class="content"> 
    <section style="background-color: pink;" class="column">jldkjfls<br/><br/></section> 
    <aside style="background-color: green;" class="column">jldkjfls<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/></section> 
<script> 
    unifyHeights(); 
</script> 
</body> 
</html>

источник

2010-11-11 23:21:55

Awesome. Большое вам спасибо –

Попробуйте использовать $('.column').css('height', maxHeight + 'px');

BTW, вы можете заменить $('div.content').children('.column') с $('div.content > .column')

источник

2010-11-11 22:48:15 ThiefMaster

хороший способ получить максимум набора свойств используется .map():

$(document).ready(function() {  
    var heights = $('div.content').children('.column').map(function(idx, el) { 
     return $(this).outerHeight(); 
    }).get(); 

    $('.column').height(Math.max(heights)); 
});

источник

2010-11-11 22:52:27 lonesomeday

Я должен делать что-то принципиально неправильное, так как это тоже не работает. Вы можете увидеть в этом тестовом документе, что это может быть: http://pastebin.com/JqfThuQ8 –

@Stuart: вы вообще не используете эту функцию , и, кроме того, согласно моей консоли и http://api.jquery.com, 'max' не является функцией. –

@Marcel Нет, это не так. Я думал, что это был собственный метод массива JS. Редактирование сейчас ... – lonesomeday

Matching высоты элементов Jquery/HTML

ответ

Смежные вопросы