Question

我的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);  
  }

Answer 1

尝试使用$('.column').css('height', maxHeight + 'px');

顺便说一句，您可以将$('div.content').children('.column')替换为$('div.content > .column')

Answer 2

获取一组属性的最大值的一个好方法是使用.map()：

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

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

Answer 3

看起来问题中的函数没有任何问题，因为在使用此标记和代码时（从您的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>

匹配元素高度jQuery / HTML

3 个答案: