- ベストアンサー
CSS初心者 コンテンツ高さに合わせたメニュー領域の背景色
CSS初心者です。 Win IE6 環境で制作しています。 「メニュー」部分（右側）と「コンテンツ部分」（左側）とに分けて２段組で外部CSSでのページレイアウトに挑戦しているのですが、なんとかテーブルでのレイアウトを全部外して、形にはなったのですが、表題のようにコンテンツの高さに合わせて、メニュー領域の背景色を付けることが出来ません・・・。 CSSは .contents { width:770px; text-align:center; } （全体のコンテンツ領域） .contents-left { width:550px; float: left; text-align:center; } （←コンテンツ部分） .contents-right { width:200px; vertical-align:100%; } (←メニュー部分） .footer { width:770px; text-align:center; clear: both; } （フッター） とし、 メニューを囲んでいるDiv要素には .menu_box { background-image:url(img/menuback.gif) ; width:197px; vertical-align:100%; } としています。 いといろと試行錯誤していて「vertical-align:100%;」または「vertical-align:bottom;」などを付けてみましたが、ダメでした。 教えてください。よろしくお願いします。
- tukamotodaisuke
- お礼率32% (18/56)
- CSS
- 回答数4
- ありがとう数3
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
「vertical-align」はあくまでもBOX内の要素のそろえ位置を指定するものであって、BOXの幅が変わるわけではありません。 ＃１の方が言うように<div>で周りを囲い背景を設定するしか。 IEとFirefoxで同様の表示ができるサンプルを作ってみました。 ご参考とまで。 ------------------------------ <html> <head> <title>Layout Sample2</title> <style type="text/css"> .contents { width:770px; text-align:center; } .contents-left { width:550px; float:left; text-align:left; background-color:#ffffff; /* 左側の背景が画像にならないように隠すため */ } .contents-right { text-align:center; } .footer { width:770px; text-align:center; } .clr { clear:both; } .back { width:770px; background-color:#ccffff; background-image:url(./img/menuback.gif); } </style> </head> <body> <div class="back"><!-- さらに囲まないとFirefoxじゃ背景でない --> <div class="contents"> <div class="contents-left"> <h2>こんてんつ</h2> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> <p>こんてんつの内容。どれくらい長くなるかは表示してみないとわからんねぇ。</p> </div> <div class="contents-right"> <h2>めにゅー</h2> <p>めにゅー１</p> <p>めにゅー２</p> <p>めにゅー３</p> <p>めにゅー４</p> <p>めにゅー５</p> </div> </div> <div class="clr"></div> </div> <div class="footer"> <p>ふったふったふった</p> </div> </body> </html>
その他の回答 (3)
- tany180sx
- ベストアンサー率63% (239/379)
外側をdiv等で囲む場合、内側にfloat要素があれば、内側の最後にclearが必要です。 内側にfloatではない高さ1px以上の要素がなければ 外側のdivは領域を確保しません。 ネスケで確認すれば分かるはずです。
- Kuppycat
- ベストアンサー率50% (109/216)
＃２です。ちょと訂正(^-^; BOXの幅が → BOXの高さが です。 たてよこの解釈は重要ですので。ゴメンorz
- tany180sx
- ベストアンサー率63% (239/379)
コンテンツ部分に応じてメニュー部分の高さを取得するのは現実的に難しいです。 <div id="wrapper"> <div id="contents-left"></div> <div id="contents-right"></div> <div style="clear:both;height:1px;"></div> </div> としてwrapperに背景画像をつければ意図した表示になると思います。
