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

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

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

Answer 4

关于这个问题的最好的啧啧可以在这里找到：

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

使用jQuery匹配div高度

4 个答案: