使用jQuery匹配div高度

Question

尝试使用jQuery匹配div高度，似乎我只能让它匹配最小的高度，但我希望它匹配最高的列。 从我可以告诉代码应该找到最高的列？ 所以我很困惑，这是我正在使用的

function matchColHeights(col1, col2) {
    var col1Height = $(col1).height();
    var col2Height = $(col2).height();
    if (col1Height < col2Height) {
        $(col1).height(col2Height);
    } else {
        $(col2).height(col1Height);
    }
}

$(document).ready(function() {
    matchColHeights('#leftPanel', '#rightPanel');
});

试图在这里做： http ： //www.tigerstudiodesign.com/blog/

Answer 1

这应该能够设置多个列到maxheight。 只需指定选择器就像你想用jQuery选择所有元素一样。

function matchColHeights(selector){
    var maxHeight=0;
    $(selector).each(function(){
        var height = $(this).height();
        if (height > maxHeight){
            maxHeight = height;
        }
    });
    $(selector).height(maxHeight);
};

$(document).ready(function() {
    matchColHeights('#leftPanel, #rightPanel, #middlePanel');
});

Answer 2

一线替代

$(".column").height(Math.max($(col1).height(), $(col2).height()));

看看这个小提琴： http ： //jsfiddle.net/c4urself/dESx6/

它似乎对我有用吗？

JavaScript的

function matchColHeights(col1, col2) {
    var col1Height = $(col1).height();
    console.log(col1Height);
    var col2Height = $(col2).height();
    console.log(col2Height);
    if (col1Height < col2Height) {
        $(col1).height(col2Height);
    } else {
        $(col2).height(col1Height);
    }
}

$(document).ready(function() {
    matchColHeights('#leftPanel', '#rightPanel');
});

CSS

.column {
    width: 48%;
    float: left;
    border: 1px solid red;
}

HTML

<div class="column" id="leftPanel">Lorem ipsum...</div>
<div class="column" id="rightPanel"></div>

Answer 3

关于这个主题的最好的tut可以在这里找到：

http://css-tricks.com/equal-height-blocks-in-rows/

Answer 4

当我在Chrome中加载您的网站时，＃leftPanel的高度为1155px，而#rightPanel的高度为1037px。 然后，您的matchColHeights方法将#rightPanel的高度设置为1155px。

但是 ，如果我允许加载页面，则使用Chrome开发者工具控制台删除在#rightPanel上设置显式高度的样式属性，其高度变为1473px。 因此，您的代码正确地将两列中较短的列设置为代码运行时较高的高度。 但随后的页面格式化会使另一列更高。