div的高度相同

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

来源

2011-07-27 Ockonal

你看过这个：http：//www.positioniseverything。网/文章/ onetruelayout/equalheight – nnnnnn

@nnnnnn这不是我所需要的，因为我不得不拉伸整个div，但它里面的最后一个项目。 – Ockonal

如果您的用户关闭了JavaScript，该怎么办？用css可以更好地处理这个问题，至少可以作为一个开始的地方 - 并且可以进一步操作。 – Bosworth99

我需要使元素的高度和宽度相等，所以我做了下面的函数，它允许你定义一个高度，或者宽度，或者真正的它。如果您发送了最小高度并需要它匹配最高元素的高度，则会使用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'});

来源

2011-07-28 00:11:05 Lance

嗯，我有这个至今：

//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。

来源

2011-07-28 00:40:52

div的高度相同

回答

相关问题