用 jQuery 匹配 div 高度答案

【问题标题】：matching div heights with jQuery用 jQuery 匹配 div 高度
【发布时间】：2013-04-09 20:00:40
【问题描述】：

尝试使用 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/

【问题讨论】：

链接到您的网站很好，但是哪些位您要匹配高度？
leftPanel 和 rightPanel，就像代码状态一样。
leftPanel 和 rightPanel 可以是任何东西。此外，当它们的高度不同时，您不会告诉我们要寻找什么。对我来说，页面设计在 FF 中运行良好。你能提供正确/不正确的截图或图表之类的吗？
这怎么可能？他们在布局中，哈哈。非常具体的ID。我很困扰。无论如何，这是一个图表以防万一。 localhostr.com/files/IijP6y2/…
在页面为ready 之后是否有任何内容被加载？具体到右栏？看来，当此代码最初运行时，右列比左列短。如果在一切运行后检查真实高度值，它会比左列高。您的 JS 函数运行良好，右边的列有问题。

标签： jquery height match

【解决方案1】：

这应该可以将多个列设置为最大高度。只需指定选择器，就像您想使用 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');
});

【讨论】：

这似乎现在至少可以附加一个高度，但我需要它来获取最大高度，这可以获取最小高度。

【解决方案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>

【讨论】：

div 的自动增长取决于其内容
我知道，这就是问题所在。呵呵：/
它们会自动生长，因此它们具有高度。现在有了脚本，你可以得到较短的脚本来匹配较高的脚本，看看小提琴
哦，对了。也许我没有具体说明，我需要匹配更高的高度，因为它会自动增长。我以为这就是代码的作用？根据代码，它不应该是其他方式，除非我遗漏了什么。我看到它在测试环境中有效，但由于某种原因在我的网站上它不起作用？ :/ 也许一个 div 没有正确清除或什么？我不确定。似乎找不到问题
让我们continue this discussion in chat

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

可以在此处找到有关此主题的最佳 tut：

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

【讨论】：