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的高度相同

回答

相關問題