如何使用jQuery使多个DIV保持相同的高度？

Question

我有几个带有不同文本内容的 DIV 标签。

HTML：

<div id="boxes">
    <div id="boxone">
        <p>...</p>
    </div>
    <div id="boxtwo">
        <p>...</p>
    </div>
    <div id="boxthree">
        <p>...</p>
    </div>
    <div id="boxfour">
        <p>...</p>
    </div>
</div>

它们采用二行二列布局，宽度是自适应的：

CSS：

div#boxes {
    width: 100%;
}

div#boxes div {
    width: 49.9%;
    float: left;
}

我想让它们的高度都相同。 因此，我循环它们并找到最高的一个的高度。然后我再次循环并将它们全部设置为该高度。 jQuery:

$(function() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
});

如果 div 的高度不需要再次更改，则此方法有效。

但是，如果我调整浏览器窗口大小，则该方法会失败：

1. 如果我（a）使浏览器变宽，那么（b）我的 DIV 变宽，那么（c）它们的文本内容换行次数减少，然后（d）我的 DIV 太高。

2. 如果我（b）使浏览器变窄，那么（b）我的 DIV 变窄，那么（c）它们的文本内容换行次数增多，然后（d）我的 DIV 太短。

如何既自动调整 DIV 的高度以适应其内容，又保持这些多个 DIV 相同的高度？

- Zack Peterson

Answer 1

对于像我一样通过谷歌搜索解决方案来到这里的其他人：所接受答案的第一部分只适用于第一个div是最高的情况。我对其进行了一些更改，现在似乎在所有情况下都能正常工作。

var highest = 0;
function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('#wrapper2>div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
    });        
        highest = heights[0]; 
    $('#wrapper2>div').each(function(){
        $(this).css('height', highest);
    });

}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

- Jarco

Answer 2

更新... 在尝试实验并找到另一个看起来可行的方法后，完全重写此答案：

function sortNumber(a,b)    {
    return a - b;
}

function maxHeight() {
    var heights = new Array();
    $('div#boxes div').each(function(){
        $(this).css('height', 'auto');
        heights.push($(this).height());
        heights = heights.sort(sortNumber).reverse();
        $(this).css('height', heights[0]);
    });        
}

$(document).ready(function() {
    maxHeight();
})

$(window).resize(maxHeight);

我注意到的一件事是，IE在处理50%宽度的浮动div时存在舍入问题......如果我将它们更改为49％，渲染效果会好得多。

这个jQuery代码有效...

// global variables

doAdjust = true;
previousWidth = 0;

// raise doAdjust flag every time the window width changes

$(window).resize(function() {
    var currentWidth = $(window).width();
    if (previousWidth != currentWidth) {
        doAdjust = true;
    }
    previousWidth = currentWidth;
})

// every half second

$(function() {
    setInterval('maybeAdjust()', 500);
});

// check the doAdjust flag

function maybeAdjust() {
    if (doAdjust) {
        adjustBoxHeights();
        doAdjust = false;
    }
}

// loop through the DIVs and find the height of the tallest one
// then loop again and set them all to that height

function adjustBoxHeights() {
    var maxHeight = 0;
    $('div#boxes div').each(function(){
        $(this).height('auto');
        if (maxHeight < $(this).height()) {maxHeight = $(this).height()}
    });
    $('div#boxes div').each(function(){
        $(this).height(maxHeight);
    });
}

- RwwL

---

每次执行adjustBoxHeights()时，maxHeight始终保持不变。 DIV高度永远不允许改回其自然/自动高度。 - Zack Peterson

如何使用jQuery删除DIV的高度样式？ - Zack Peterson

$(selection).height（'auto'）似乎与我上面的示例中的$(selection).css（'height'，'auto'）一样有效。 - RwwL

没有一个.height('auto')、.css('height', 'auto')或者.attr('height','')对我有用。 - Zack Peterson

我搞定了。我把最终的代码添加到了你的答案中。谢谢你的帮助。 - Zack Peterson

Answer 3

请查看这个jQuery插件，它可以帮助您监控CSS属性，例如高度。

- pjesi

---

如果您发现一个答案是不正确的并且您投票将其降低，请至少给出一个理由。 - pjesi

Answer 4

我发现这个解决方案对我的情况更加整洁。它可以在任何 div 最高的情况下工作。基于 Chris Coyier 在 CSS Tricks 上的文章。

function maxHeight() {
    var maxHeight = 0;
    $(".container > .post-box").each(function(){
       if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
    });
    $(".container > .post-box").height(maxHeight);
}

$(document).ready(function() {
    maxHeight();
}

$(window).bind('resize', function () {
    $(".container > .post-box").css('height', 'auto');
    maxHeight();
}).trigger('resize');

然而，在再次运行函数之前，我确实需要在调整大小时将高度设置为自动。我不需要在原始函数中设置它，因为它已经在CSS中设置好了。

- J May

Answer 5

如果想要通过调整大小等操作使其起作用... 就像这样做：

function sortNumber(a,b) {
    return a - b;
}

var highest = 0;

function maxHeight() {
    var heights = new Array();
    $('.equalheight div').css('height', 'auto');
    $('.equalheight div').each(function(){
        heights.push($(this).height());
    });        
    heights = heights.sort(sortNumber).reverse();
    highest = heights[0]; 
    $('.equalheight div').css('height', highest);
}

$(document).ready(maxHeight);
$(window).resize(maxHeight);

- Bram