[CSS]サイドバーのボリュームに関係なく背景の高さを揃えるスタイルシート

3カラムレイアウトの左右のサイドバーのコンテンツ量が少なくても、コンテンツと背景が同じ高さになるようにするスタイルシートをLine25から紹介します。

Create Sidebars of Equal Height with Faux Columns
demo

3カラムのレイアウトは、下記のようなコードで記述されています。

<div id="content">
<div class="sidebar primary"><!--Left Sidebar--></div>
<div id="main"><!--Main Content--></div>
<div class="sidebar secondary"><!--Right Sidebar--></div>
</div>

左右のサイドバーのコンテンツ量が少ない場合は、下記のように背景が中央のコンテンツ箇所より短くなってしまいます。

サイドバーの背景がコンテンツより短い

The solution

この問題を解決する方法を紹介します。

背景はサイドバーに指定せず、コンテンツに配置した背景画像を背景として使用します。実装のイメージは下記のようになります。

背景画像は、faux-columns.pngです。

背景はコンテンツ箇所に、下記のように指定します。

#content {
	overflow: auto;
	background: url(images/faux-columns.png) repeat-y;
}

これで背景はサイドバーのコンテンツ量に影響を受けません。

また、この方法は3カラムのレイアウトに限らず、2カラムやメガレイアウトにも対応することができます。