div高度相等

Question

I have a site . I want to make 3 vertical divs with equal height. For this purposes I change the height of last block in each column/div.

For example, the naming of 3 columns are:

.leftCenter
.rightCenter
.right

Now I wrote a code which set the equal height for .leftCenter and .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 is the latest subblock in left column (there are 3 images in it). So, if central div is bigger than left div, I change the height of news to make them equal. This code works in Firefox , but doesn't work in Chrome. That's the first question. And the last is: how to make equal 3 divs (including right one).

Answer 1

I needed to make elements equal in height and width so I made the following function that allows you to define a height, or width, or really whatever at it. refType would be used if you sent a min-height and needed it to match the height of the tallest element.

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

Well I have this so far:

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

The only problem is that it does not make #newItemsList as tall as the parent, .leftCenter. It also assumes that the right div will be largest, so I don't know if it will still work if it isn't the biggest of the 3.