先日のボックスの高さをそろえるスクリプトを適当にプラグイン化しました。

 

まぁ、果たしてプラグインと呼ぶにもおこがましい、ちゃちいもの。

親ボックスから見て、子ボックス一列の最大の高さに同行列をあわせるとても習作くさいスクリプト。

以下備忘録。

またそのうち仕事で使う時が来るかもしれないのでいちおうここに保存しときます。

 

コアスクリプト

(function($){
$.fn.fixHeight = function(){
this.children('div').removeClass('baseHeight');
this.each(function(){
$baseElem = $(this).children('div:first-child');
$(this).children('div').each(function(){
$(this).css({'height':''});
if($(this).height() > $baseElem.height()){
$baseElem = $(this);
}
});
});
$baseElem.addClass('baseHeight');
this.children('div').each(function(){
$(this).css({'height':$baseElem.height()});
});
}
})(jQuery);

以上をfixheight.jsで保存。

 

jQuery関連読み込み

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" charset="utf-8"></script>
<script src="scripts/fixheight.js" charset="utf-8"></script>

 

設定

$(window).load(function(){
$('#fixheight').fixHeight();
$('#fixheight1').fixHeight();
$('#fixheight2').fixHeight(); });
 
$(window).resize(function(){
$('#fixheight').fixHeight();
$('#fixheight1').fixHeight();
$('#fixheight2').fixHeight();
});

 

HTMLサンプル

<style>
body{ margin:0; }
#fixheight div{ width:22%; margin:0 2% 0 0; padding:2% 0; background:#FFC; border:solid #CCC 1px; float:left; }
#fixheight1 div{ width:30%; margin:0 1% 0 0; padding:2% 0; background:#FCF; border:solid #CCC 1px; float:left; }
#fixheight2 div{ width:48%; margin:0 0.5% 0 0; padding:2% 0; background:#CFF; border:solid #CCC 1px; float:left; }
.cl{ margin:0; padding:0; clear:both; } </style>
<div id="fixheight">
<div>あああああああああああああああああああああああああああああああああああああああああ<br />あああああああああああああああああああああああああああああああああああああああああ<br /></div>
<div>ああああああああああああああああああああああああああああああ</div>
<div>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
<div>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>
<p class="cl">&nbsp;</p>
</div>
<div id="fixheight1">
<div>ああああああああああああああああああああああああああああああ</div>
<div>あああああああああああああああああああああああああああああああああああああああああ<br />あああああああああああ<br />あああああああああああ<br /></div>
<div>あああああああああああああああああああああ</div>
<p class="cl">&nbsp;</p>
</div>
<div id="fixheight2">
<div>あああああああああああああああああああああああああああああああああ</div>
<div>あああああああああああああああああああああああああああああああああああああああああああああ</div>
<p class="cl">&nbsp;</p>
</div>

 

動作

http://www.cattlemute.com/publish/fixheight/