[JS]jQueryで高さの異なる要素を最大値で揃える方法

jQueryプラグイン・ライブラリ

2013.12.13

floatで横並びにした要素の高さを最大値で揃えるためには、以前に紹介させていただいたCSS を使う方法以外に、jQueryでも対応することが可能ですので紹介させていただきます。

jQueryで高さの異なる要素を最大値で揃える

jQueryで高さの異なる要素を最大値で揃える

今回、floatで横並びにする要素は#sidebarと#contentsです。

HTMLの記述例

まずはHTML側の記述はこんな感じとします。

<div id="container">
	<div id="sidebar">左サイドメニュー</div>
	<div id="contents">右コンテンツ部</div>
</div>

<div id="sidebar">左サイドメニュー</div>

<div id="contents">右コンテンツ部</div>

</div>

CSSの記述例

続いてCSSの記述例です。
#sidebarにfloat:left、#contentsにfloat:rightをそれぞれ指定しています。

#container	{
	height:100%;
}
#sidebar	{
	float:left;
	width:20%;
}
#contents	{
	float:right;
	width:80%;
}

#container {

height:100%;

}

#sidebar {

float:left;

width:20%;

}

#contents {

float:right;

width:80%;

}

Javascriptの記述例

最後にJavascriptですが、<head>タグ内にjqueryファイルと一緒に以下の記述を追加します。

<script src="./jquery.min.js"></script>
<script>
$(document).ready(function(){
	var height = $('#container').outerHeight();
	height = height + 'px';
	$('#sidebar').css('height',height);
	$('#contents').css('height',height);
});
$(window).resize(function () {
	var height = $('#container').outerHeight();
	height = height + 'px';
	$('#sidebar').css('height',height);
	$('#contents').css('height',height);
});
</script>