以前は、誰もがテーブルを使用してタイプセットするとき、同じ高さの列を作成することは非常に簡単でした。 たとえば、3列のテーブルを作成すれば十分で、すべての列の高さは自動的に同じになります。 しかし、ブロックレイアウトはそれほど単純ではありません。
この記事では、同じ高さの列を作成するいくつかの方法と、これらのメソッドとブラウザー（IE6を含む）との互換性について説明します。 これらのメソッドはすべて、3列レイアウトの作成について説明しています。
方法1. display：テーブルプロパティを使用する
レイアウトを実装するには、リスト（
ul
）または行と各列にネストされたブロックを持つ
div
ブロックが使用されます。 フレーミングブロック
div
display: table
div
れ、ネストされた各列ブロックはdisplay：
table-cell
設定されます。
リストの例を考えてみましょう。
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 {
/*make it 100% width and a minimum of 1000px width*/
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;
}
例を見る
利点：
これは、他の方法とは異なり、同じ高さの列を作成する最も簡単で簡単な方法です。
すべての列に等しい外部インデント（テーブルの
cellspacing
などの
margin
）は作成できませんが、インデントをシミュレートする適切な幅の白い境界線（または列の背景色）に置き換えることができます。
短所：
この方法は、IE7以下のブラウザーでは機能しません。 このメソッドを安全に使用できるようになるまでに長い時間がかかります（IE7が新しいIE6になるとき）。
方法2：JavaScriptを使用する
このメソッドは、最も小さい列の高さに基づいて各列の希望の高さを「配置」する小さなJSコード（jQuery）の使用に基づいています。
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%;
}
.rightsidebar {
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"));
});
JSコードを別のファイルに入れて、HTMLコードで直接呼び出すことができます。 この場合、jQueryの初期化はコードの上に配置する必要があります。
変更する必要があるコードは、列を作成するブロッククラスの名前です。 この例では、これは
container
クラスです。
.container > div
列を持つブロックのクラス名を変更するか、各列ブロックにクラスを追加して、便宜上それらを個別に使用することもできます。
例を見る
利点：
この方法の主な利点は、すべてのブラウザーで機能することと、CSSコードを使って高さを調整する必要がないことです。
短所：
JavaScriptがそれぞれ無効になっている場合、列の高さは等しくなりません。 しかし、原則として、これは非常にまれなケースです。 最近のほとんどのサイトでは、JSを含める必要があります。
方法3：人工コラム
このメソッドは、同じ高さの列を実装する最初の1つによって発明されました。 その本質は、フレーミングブロックに列を模した背景が割り当てられていることです（下図を参照）。 それらは単にこの背景に重なります。 背景が繰り返されるため、同じ高さの効果が作成されます。
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ブロックの使用に基づいています。各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;
}
簡単に見えませんか？ 5つの主要なポイントを理解するための主なもの：
- .rightback、.contentback、および.leftbackには、.leftsidebar、.content、および.rightsidebar要素が含まれ、これらの要素にはテキストが含まれます。
- ネストされた各ブロックは、列の色/背景を担当します。 この例では
.leftbackは.leftsidebarに適合し、
.contentback-.content
および.rightback-.rightsidebar。 - 最後の（右端の列に責任がある）に加えて、各<div>ブロックには、背景を含む右に隣接する要素の幅に等しいインデントが右側に与えられます。 この例では、.contentback（.contentバックグラウンドを担当）は300px（.rightsidebarブロックの幅）だけ左にシフトされます。 （下図を参照）
- .leftsidebar、.content、および.rightsidebar列は、一定の幅で次々に配置されます。
- これらは、各列の幅の合計に等しいインデントを左に提供しますが、右端を除きます。 つまり それらは等しい= width .rightsidebar（300px）および.content（400px）= 700px。（B + G）
次の図は、.rightback、.contentback、および.leftbackブロックの配置方法を示しています。 左端は.rigthback、右端は.leftbackです。
破線は、列の可視領域を示しています（.rightbackブロックは、overflow：hiddenを使用してトリミングされます）。
以下の図で、赤い線の下の黒い線は、<div> .leftsidebar、.content、および.rightsidebarエレメントのコンテンツで、float：leftおよび対応する幅に設定されている場合です。
3つの要素はすべて、相対位置を使用してCの左にオフセットされます。
C = B + G
この方法については、 この記事で詳しく説明します 。
3列レイアウトの例を表示 | 4列のレイアウトの例を参照してください
利点：
このメソッドは、Internet Explorer 6を含むすべてのブラウザーで機能します。JavaScriptは実装に必須ではなく、完全にCSSとHTMLに基づいています。
短所：
このメソッドは他のメソッドほど単純ではありませんが、必要なだけ同じ高さの列を作成できます。
おわりに
各方法には長所と短所がありますが、確かに最後の方法を選択することで、JSなしでどのブラウザーでも機能する同じ高さの列を作成できます。