サイドバーの背景色を項目のない部分にも表示させたい

質問

サイドバーの背景色を項目のない部分にも表示させたい

ブログテンプレートを自作しています。サイドバーの背景色をグレーに設定しているのですが、項目がなくなった時点で背景色が終わってしまいます。これを一番下まで表示させたいと思っているのですがどうすればよいでしょうか。
（うまく説明できないのでお絵かき添付で説明しました。）

それらしきテンプレートを見つけては自分のcssに足らないものを追加したりと体当たりで
カスタマイズに挑んだのですが、どうしてもうまくいきません。

自作テンプレートのHTMLは<div>で入れ子状態になっており、簡単に分解？すると
<div id="container">
　<div id="blog">
　</div>
<div id="right">
　</div>
</div>
となっており、

サイドバーのcssは
div#right {
width : 220px;
float : right;
text-align:left;
margin: 0px;
padding:30px 0px 0px 0px;
overflow: hidden;
font-size: 0.7em;
background-color: #f6f6f6;}
です。
（情報が不十分でしたら教えてください・・・！）

参考URLとして自分のブログのテンプレート表示のURLを記載します。
http://hare77777.blog58.fc2.com/?template=test2&index

お分かりの方いらっしゃいましたらよろしくお願いいたします。

回答No.4

abril · ベストアンサー

No.3です。お礼欄でのご質問の答えではないのですが。
＃そっちは実際にブログのテンプレートをコピーして検証してからでないと確実なお答えができないので。
＃すみませんが時間があったら、でご容赦下さい。
既出回答で提案されているより簡単な方法の実装へのアドバイスになります。

>>大枠にright用の背景色をつけ、leftに元の色をつける
>↑これが気になったのですが、cssで#blogと#rightに色は付けているのですが、（記事欄が白でサイドバーが前述のとおりグレーです。）それとは違う意味なのでしょうか？

違っていますね。ブログのソースを拝見しましたが、No.2様の書かれた方法になっていません。

質問者様のブログのソースの構造は、”記事欄”が#blog、”サイドバー”が#right、その2つのコンテナブロックを包含しているのが#containerです。この場合、No.2様のおっしゃっている「大枠」とは#containerであり、#rightではありません。
（#rightにサイドバー用の背景色を付けても#rightは#blogより短いままなのですから元の木阿弥です。）

・#containerの方に本来サイドバー用の背景色である#f6f6f6（背景画像があるならそれも）を指定
・#rightには背景色指定なし
・#blogは#ffffffのまま

こうしておけば、#rightが短くても、#f6f6f6は元々親要素である#containerの背景色なので、#rightのレンダリングの範囲が終わっていても、もう一つの子要素である#blogのレンダリングの終点まで併せて伸びる事になり、白背景色のエリアとグレー背景色のエリアの高さが同じになりますから、擬似的に#blogと#rightの高さが揃っているかの様に見えるわけです。

ただし、この方法は、常に#blog（記事欄）が#right（サイドバー）より”必ず”長くなるという性質の場合にのみ有効です。もし#blogが#rightより短くなってしまうと、#blogの白背景色が終わった残りの領域には#containerのグレー背景色がレンダリングされているのが見えてしまうので、逆L字型にグレーの背景色が表示されてしまいます。
大抵はサイドのサブ的コンテンツよりメインのコンテンツである記事覧の方が長くなるとは思いますが、とても短くコメントも少ない記事ばかりエントリーされているページの場合はその限りでもない事もあるかもしれません。

>画像を用意できるのであればこういうテンプレ見たことあります！画期的（？）だと思いました。

こちらの方法は、tableを使わない2カラムレイアウトを始めて最初の頃に割と容易に考え付く方法だと思いますし、実際かなり昔からメジャーになっていますので、さほど画期的ではないかと…それにこちらの方法も万全ではありません。2カラムの幅が固定値（左カラム200px・右カラム600px、とか）の場合のみ有効です。カラムの幅がウィンドウ・サイズによって変動するリキッド・レイアウトには使えません。カラムの内容と背景色の領域がずれてしまうからです。
質問者様のブログは左カラム530px・右カラム220pxとい固定レイアウトですので使えます。#containerの幅と同じ750pxの幅のキャンバスの左端から530pxを#ffffff・残り220pxを#f6f6f6で塗りつぶした一枚の画像（高さは縦方向にリピートするので何pxでもかまわないのですが、あまり小さい単位にするとレンダリングの際負担になりますので、50px以上ぐらいはあった方がいいかと思います）用意すればいいだけですので簡単です。

お礼

補足説明ありがとうございました・・・！！！！！！
サイドバーの背景を設定しないことで地の色を見せる、ということだったんですね。
ただabrilさんがご指摘のとおり、サイドバーの方が記事より長くなると今度は記事側の背景が寸足らずになってしまいますね、うーん・・・。1記事だけ表示した場合は確かにサイドバーの方が長くなるかと思います。

すみません、画期的ではなく原始的、と言いたかったのですが言葉が出ませんでした・・・（恥）。
画像はできるだけ小さいほうが軽くて良いのかと思ってましたが
（縦1pxくらいのものを用意するつもりでいました。）
何回も繰り返し表示をさせるほうが重くなってしまうのでしょうか。

回答No.5

abril

No.4です。

> 画像はできるだけ小さいほうが軽くて良いのかと思ってましたが
> （縦1pxくらいのものを用意するつもりでいました。）
> 何回も繰り返し表示をさせるほうが重くなってしまうのでしょうか。

確かにそう言われていた時代があり、私もそれを実感していた時期がありました。
ですが、現在の環境でもそうなのかという事が気になりましたので、改めてググってみると、今はどうも必ずしもそうではないらしいです。

【参考】http://css-happylife.com/log/memo/000728.shtml

上記のページの真ん中ぐらいに「繰り返しの背景画像を小さく切り過ぎないよーに。」という見出しの記事がありますが、私もその様に認識していたのです。ですが、その記事内にある追記にもあります様に、小さくて良いという実験結果を出しているところもある様で…でも私も個人的には上記の筆者さんのコメントに同意で、最小単位で切った画像とその10倍で切った画像の差が実感できないのだったら、何の画像か一目でわかりやすい様にある程度の大きさで切る方をとります。

なので、すみませんがこの部分に関しては確実な事が言えないという事がわかりましたので、訂正しておきます。背景画像のサイズは質問者様のお好みで切って下さい。

お礼

ありがとうございます。
勉強になりました！

回答No.3

abril

CSSでも可能ですよ。やりかたは色々ありますが、例えば下記など。

【参考】http://css-happylife.com/log/css-template/000028.shtml

ただし、上記の方法が現在の質問者様のブログにもそのまま対応できるかどうかは未検証ですので、調整が必要な場合もあるでしょう。
No.2様も書かれている2カラムを包含しているコンテナの方に2カラムの背景をくっつけた一枚の画像を背景にする方法は簡単で手っ取り早い事は確かです。（今時のブログのテンプレートはテーブルでカラムを作ってないものがほとんどでしょうし、今更テーブル・レイアウトはお奨めしません）

あとは、指定した同じグループのコンテナの高さを比較して、高い方のコンテナに併せて短い方のコンテナの高さを引き延ばしてくれる、というJavaScriptもあります。例えばheightLine.jsとか。

お礼

回答ありがとうございます。tableは中身が全部読み込まれるまで表示されず時間がかかるので避けたいなと思っていました。

参考URLのサンプルをDLして試してみたのですが、ローカルでこのcssに自分の設定項目を突っ込んだ場合はうまく表示できたのに、このcssの項目を自作テンプレートに突っ込んだ場合（backgroundを#rightではなく#containerに設定する）は画像が表示されませんでした。

1人目の方が教えてくれた方法に再トライしたいと思っているのですが、

■リンク先の管理人さんはContainer内の背景色を下まで伸ばしたい、ということで以下のような設定をしているのですが、

#Container{
height:100%;
min-height:100%;
width:80%;
background:Khaki;
border-right:1px solid red;
}
body > #Container{
height:auto; }

■これを入れ子形式のテンプレートで応用する場合は、どのように書き換えればよいのでしょうか。
メインコンテンツの#blogとサイドバーの#rightがあり、
それを囲うための#Containerがある、という形式のテンプレートなのですが、以下のような設定は間違っていますか？

#right{
height:100%;
min-height:100%;
width:80%;
background:Khaki;
border-right:1px solid red;
}
#Container > #right{
height:auto; }

html, bodyのheightも100%で指定済みです。

回答No.2

egtomo

現在のCSSではまだhight:100%;ができない仕様なので、全てのブラウザに対応させるには、安全なテーブルがいいかと思います。

CSSでどうしてもやりたいのであれば、とりあえずの解決策としては、大枠にright用の背景色をつけ、leftに元の色をつけることで、擬似的にサイドバーに色をつけることができます。

画像を用意できるのであれば、大枠にleft、rightの背景一体の画像をbackgroundにて指定します。
あとは、そのサイズにあわせて、left、rightを設定すれば完成です。

お礼

回答ありがとうございました。

>大枠にright用の背景色をつけ、leftに元の色をつける
↑これが気になったのですが、cssで#blogと#rightに色は付けているのですが、
（記事欄が白でサイドバーが前述のとおりグレーです。）
それとは違う意味なのでしょうか？

>画像を用意できるのであれば
こういうテンプレ見たことあります！画期的（？）だと思いました。

回答No.1

egtomo

こういった事ですか？

http://gyauza.egoism.jp/clip/archives/2007/05/070509-background-clip/

お礼

即答ありがとうございました！！多分そうだと思います。

参考URLに書かれていたとおりに、

html, body {
width: auto;
height:100%; }　　←※元はここをautoにしていた。　

#container {
width: 750px;
height:100%; 　　　←※
text-align: left;
margin-left: auto;
margin-right: auto;
padding:0px;
background-color: #ffffff;}

div#right {
width : 220px;
height:auto; 　　←※
float : right;
text-align:left;
margin: 0px;
padding:30px 0px 0px 0px;
overflow: hidden;
font-size: 0.7em;
background-color: #f6f6f6;}

と3箇所heightの設定を追加して見たのですが、やはり背景色は伸びません。

元々はサイドバーの下はdiv#blog部分に設定してある背景色の白色だったのですが、
これらの設定を追加したことで今は<body>の背景色が表示されています。