ブロックレベルのカラムの高さを揃える4つの方法

以前、「jQueryを使ったカラムの高さを揃えるスクリプト[js]」と2カラム用の高さを揃えるスクリプト「Equal Height Javascript」[js]のエントリーでも紹介させていただきましたブロックレベルのカラムの高さを揃える方法ですが、Build Internet!より、非常に参考になる方法があったので、ブロックレベルのカラムの高さを揃える4つの方法として紹介します。

jq0907101.jpg

1.Display: tableを使用してCSSのみで行う方法

HTML

<div class="base">
<ul class="base-row">
<li class="cell1"><div class="content1" >.....Lots of  Content....</div></li>
<li class="cell1"><div class="content2">.....Lots of  content....</div></li>
<li class="cell1"><div class="content3">.....Lots of  content....</div></li>
</ul>
</div>

CSS

.base {
	width: auto;
	margin-left: 0px;
	margin-right: 0px;
	min-width: 1000px;
	padding: 0px;
	display:table;
}
.base-row {
	display: table-row;
}
.base li {
	display: table-cell;
	width: 33%;
}
.cell1 {
	background-color: #f00;
}
.cell2 {
	background-color: #0f0;
}
.cell3 {
	background-color: #00f;
}

メリットはシンプルで最も簡単な方法です。デメリットとして、IE7とそれ以下では動作しません。

2.JavaScriptの使用

HTML

<div class="container">
 <div  class="leftsidebar"> ... Lots Of Content ... </div>
 <div class="content"> ....  Lots Of Content ... </div>
 <div  class="rightsidebar"> ... Lots Of Content ... </div>
</div>

CSS

.container {
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}
.leftsidebar {
	float: left;
	width: 33%;
}
. content {
	float: left;
	width: 33%;
}
. content {
	float: left;
	width: 33%;
}

JavaScript(jQuery使用)

function setEqualHeight(columns){
	var tallestcolumn = 0;
	columns.each(
	function(){
		currentHeight = $(this).height();
		if(currentHeight > tallestcolumn){
			tallestcolumn = currentHeight;
		}
	});
	columns.height(tallestcolumn);
 }
$(document).ready(function() {
	setEqualHeight($(".container  > div"));
});

これも簡単ですが、JavaScriptオフ環境では全く持って無意味です。

3.ダミーのボックスを使った方法

HTML

<div class="container">
    <div class="left"></div>
    <div  class="content"></div>
    <div class="right"></div>
    <div class="clearer"></div>
</div>

CSS

.container {
	background-image: tile.png;
	background-repeat: repeat-y;
	width: 900px;
	margin-left: auto;
	margin-right: auto;
}

.leftsidebar {
	float: left;
	width: 200px;
}

.content {
	float: left;
	width: 400px;
}

.right {
	float:left;
	width: 300px;
}

.clearer {
	clear: both;
}

ものすごくシンプルですが、幅が等しいときには使用できません。

4.<div>に個別の背景色を使う方法

HTML

<div class="rightback">
<div class="contentback">
<div class="leftback">
<div  class="leftsidebar">...Lots Of Content...</div>
<div class="content">  ...Lots Of Content...</div>
<div  class="rightsidebar"> ...Lots Of Content...</div>
</div>
</div>
</div>

CSS

.rightback {
	width: 100%;
	float:left;
		background-color: green;
	overflow:hidden;
	position:relative;
}
.contentback {
	float:left;
	background-color:blue;
	width: 100%;
	position:relative;
	right: 300px; /* width of right sidebar */
}
.leftback {
	width: 100%;
	position:relative;
	right: 400px; /* width of the  content area */
	float:left;
	background-color: #f00;
}

.container {
	width: 900px;
	margin-left: auto;
	margin-right:auto;
}

.leftsidebar {
	float:left;
	width: 200px;
	overflow:hidden;
	position:relative;
	left: 700px;
}

.content {
	float:left;
	width: 400px;
	overflow:hidden;
	position:relative;
	left: 700px;
}

.rightsidebar {
	float:left;
	overflow:hidden;
	width: 300px;
	background-color:#333;
	position:relative;
	left: 700px;
}

ややこしそうに見えますが、どのブラウザでも動作します。

どの方法でも良いといえば良いです。JavaScriptを使ってしまえば、HTMLもシンプルなので一番簡単です。しかし、JavaScriptのオフ環境とどのブラウザも対応させると4番目のほうが良いでしょう。