サイドバーをコンテンツと同じ長さにする

サイドバーに色を付けて設定しておくと、メインコンテンツのほうが
長くなる場合サイドバーが途中で切れるという現象がおこります。

テーブルタグでホームページを作成している場合はいいのですが
DIVタグで作っているとそういう現象がおこります。

どいう場合起こるのか？

たとえばサイドバーとメインコンテンツをdivタグで作って、floatで
左右に分けた場合、サイドバーのほうが長い場合は問題ないのですが
メインコンテンツのほうが長くなると、サイドバーの情報が切れる
ところでサイドバーも終わってしまい、サイドバーの下が空欄に
なってしまいます。

サイドバーの長さを指定するわけにはいきませんので、どうしたら
いいのか？


これは、サイドバーに色をつけるのではなく、全体を指定する
divのサイドバーの位置に色をつけるとうまくできます。

どういうことかというと

divで作る領域は、ヘッダー、サイドバー、コンテンツ、フッター
担っていると思いますが、これを全て囲い込むdivの領域を
作るということです。

これをsitboxとでも名前をつけておきます。


このsitboxのcssの背景画像をサイドバーの位置する幅をサイドバーの
色で、コンテンツのところはコンテンツの色にするわけです。

背景画像はペイントや画像作成ソフトで作ってください。

そのときに、サイドバーの幅のピクセルを指定することになるので
その幅を守るようにしないと、ずれてしまうので注意して下さい。


フッターやヘッダーにも背景画像をつければ、ヘッターなどには
サイドバーなどの色は反映されません。

というのは、cssのルールに上書きというのがあって、
sitbox→ヘッダー→サイドバー→メインコンテンツ→フッター
という順番になっていると思うので、sitboxの画像は一番下に
あるということになるのです。


プログラム全般 - livedoor Blog 共通テーマ