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

时间:2009-04-29 18:39:40

标签: jquery html css layout

我有一些不同文本内容的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>

它们采用2×2布局,宽度不变:

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太短了。

  3. 我如何(1)自动将DIV的大小调整到正常的内容高度,还(2)保持多个DIV的高度相同?

5 个答案:

答案 0 :(得分:5)

对于像我一样的其他人,通过搜索谷歌寻求解决方案来到这里:接受答案的第一部分仅在第一个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);

答案 1 :(得分:4)

更新 ...在尝试并找到另一种显然可行的方法后,完全重写此答案:

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

答案 2 :(得分:2)

查看此jQuery Plugin,它允许您监控CSS属性,例如高度。

答案 3 :(得分:0)

如果你希望它在调整大小等时起作用......就像这样:

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);

答案 4 :(得分:0)

我发现这个解决方案对我的情况要整洁一些。无论哪个div最高,它都可以工作。基于这个古老的Chris Coyier post at 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');

但是,我确实需要在重新调整大小之前将高度设置为auto,然后再次运行该函数。我不需要在原始函数中设置它,因为它是在css中设置的。