リキッドレイアウトと背景色

Date:2007/05/02 03:33

リキッドレイアウトとは、ウィンドウの幅に合わせてレイアウトの最大幅も変わる設定のことです。
現時点の本サイトも、リキッドレイアウトで表示されている方が多いかと思います（携帯の方は別）。

かつては table 要素を用いてリキッドレイアウトを実現していましたが、最近の主流は div 要素を用いています。

しかし、table ではなく、div を使うと背景色で少し困ります。

例えば、左に 250px 固定のメニューを配置し、右のメインはその残り、というデザインにするとします。

このとき、左のメニューの背景色を本文部分とは違う色に指定した場合、本文より縦幅が短くなると、色が下まで埋まらないという現象が発生します。

これを div だけで上手く解決する方法は、残念ながら分かりません。

table を使わない簡単な解決方法としては、CSS で body のbackground に、例えば横 250px 縦 1px の画像を「repeat-y 」で指定します。

body {
background: url("背景色画像のURL") repeat-y;
}

としてやれば、メニューの方が長かろうが、本文の方が長かろうが、画面の下まで色が塗りつぶせます。