CSS Radar

CSSでカラムのheightを合わせる

Tableレイアウトをしていた時代に簡単にできたことがCSSでできない。
いまだにフルCSSへ移行できないという場合によくあるのが、複数カラムを採用する場合のそれぞれのカラムの高さが同じにならないこと。
Tableレイアウトでは、基本的にはTDの高さはもっとも高いTDに合わせるという状態なので、とくに意識せずとも実現できたが、CSSではそうはいかない。

CSSでカラムheightを合わせる方法

通常CSSでは左図のように、mainカラムとsidebarカラムの高さは合わない。それぞれのカラムがもつ内容がそれぞれのカラムの高さを決めるからだ。

通常であれば、それぞれの高さが異なっていても気にならないが、背景画像がある場合や、カラムごとに異なる背景色を敷いている場合などレイアウトの基本構造的に「ケツをあわせ」ないと気になる。

まずはHTMLから

<div id=”container”>
    <div class=”main”>メインカラム</div>
    <div class=”sidebar”>サイドバー</div>
</div>

このように、高さを合わせたいカラムをタグで囲むことになるが、clearfixする必要があるので、追加のタグにはならないだろう。

それではCSS

#container {
width:340px;
height:auto;
overflow:hidden;
}
#container .main {
float:left;
width:160px;
padding-bottom: 30000px;
margin-bottom: -30000px;
}
#container .sidebar {
float:right;
width:160px;
padding-bottom: 30000px;
margin-bottom: -30000px;
}

としてやればOK。

それぞれのカラムに対して、padding−bottomを絶対安全と思えるくらい追加し、その分をmargin-bottomで割り引く。
これら2つのカラムを#containerで囲み、overflow:hiddenしてやる。

いわずもがなだが、.mainや.sidebarにmarginやpaddingの他の値を入れたい場合には注意が必要だ。