[う]CSS小技 - 背景を下まで伸ばす

CSS小技 - 背景を下まで伸ばす »

CSS小技 - 背景を下まで伸ばす

ケータイから投稿するにつれ、文章の短い記事が増えてきたわけですが、その時ちと困るのが背景色。→こんな感じで右サイドバーの長さにメインスペースが負けちゃって、背景色が画面の一番下まで来てくれないんですヨ。

テーブルタグでレイアウトしてる場合は問題なく下までくるんですが、CSSでレイアウトするとこーなっちゃうんですよね...。

でもこれ、CSSと画像で簡単に下までもってくることができます。

まずは画像の準備。メインスペースの横幅×1pxで、背景色と同じ色のgif画像を作ります。ウチで言えば「460px×1px 白」ですな。（スペース自体は440pxなんですけど、左右に10pxずつの余白を取ってるんで合計460pxです。）

で、その画像を、レイアウトしている一番外側の枠の背景画像に指定します。ウチで言えばid="Container"というのが一番外の枠で、それに対する指定は

background:url('/images/さっき作った画像名.gif') left repeat-y;

といった感じ。

CSS小技 - 背景が下まで伸びた図

すると、→こんな感じで一番下までちゃんと伸びてくれるんですｗ

ここで注意しなきゃいけないのは、メインスペース、サイドバーのfloatをしっかり解除すること。解除してないと、Firefoxで見たとき下まで伸びてくれなくなっちゃいます。

メインスペースかサイドスペース、指定した背景が下まで伸びてくれなーいという方はぜひお試しくださいませ( ´∀｀)

トラックバック先URL：