潜水高度相等

Equal height for divs

本文关键字：高度 潜水      更新时间：2023-09-26

我有一个网站。我想画出3个等高的竖线。为此，我更改了每个列/div中最后一个块的高度。

例如，3列的命名为:

.leftCenter
.rightCenter
.right

现在我写了一段代码，为.leftCenter和.rightCenter设置相同的高度:

var left = $('.leftCenter').height();
var center = $('.rightCenter').height();
var news = $('#newItemsList').height();
if (center < left)
    $('.rightCenter').height(center + (left-center));
else if (center > left)
    $('#newItemsList').height(news + (center-left));

news是左列最新的子块(其中有3张图像)。如果中央div大于左div，我就改变news的高度使它们相等。这段代码可以在Firefox中工作，但不能在Chrome中工作。这是第一个问题。最后一个是:如何使3个div相等(包括右1)。

我需要使元素的高度和宽度相等，所以我编写了以下函数，允许您定义高度，宽度或其他任何东西。如果您发送最小高度并需要它匹配最高元素的高度，则将使用refType。

elemsEqual = function (options) {
        var defaults = {
                'type' : 'height',
                'refType' : '',
                'elements' : [],
                'maxLen' : 450
            },
            settings = $.extend({}, defaults, options),
            max = 0;
        $(settings.elements.join(",")).each(function () {
            max = Math.max( max, parseInt( $(this).css(settings.type) ) );
            if(settings.refType.length) max = Math.max( max, parseInt( $(this).css(settings.refType) ) );
        });
        max = ((max < settings.maxLen) ? max : settings.maxLen);
        $(settings.elements.join(",")).css(settings.type, max + "px");
};
elemsEqual({elements : ['#selector1','#selector2', ... '#selectorN'], type : 'height'});

到目前为止我有这个:

//Get the height of the right column since it starts at a different Y position than the other two
var right=$('.right').outerHeight(1)-$('.left').children('header').outerHeight(1)-$('.left .innav').outerHeight(1);
//Get the max of the 3
var height_max=Math.max($('.leftCenter').outerHeight(1),$('.rightCenter').outerHeight(), right);
//Apply the max to all 3
$('.rightCenter').height(height_max-3); //-3 to accommodate for padding/margin
$('.right').height(height_max);
$('.leftCenter').height(height_max);

唯一的问题是它没有使#newItemsList和父元素。leftcenter一样高。它还假设右div是最大的，所以我不知道如果它不是3个中最大的，它是否仍然有效。

相关文章：