Question

我有site。我想制作3个相同高度的垂直div。为此，我更改了每列/ 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，我会改变新闻的高度以使它们相等。 This code works in Firefox，但在Chrome中不起作用。这是第一个问题。最后一个是：如何制作相等的3个div（包括正确的一个）。

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

Answer 2

到目前为止，我有这个：

//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中最大的。

div的高度相等

2 个答案: