- 締切済み
CSSを使って、背景色をブラウザの縦100％につづかせたいです。
こんにちは。おせわになります。 CSSを使って、左側に同じ背景色がブラウザの縦いっぱいにつづき、 右側に、たくさんの文字や画像をのせるレイアウトをしたいと思ってます。 しかし、どうやっても左の背景が縦100％になりません。 右のテキストの量が少なければ、問題ないのですが、多いとむりです。 グーグルなどでも調べましたが、どうしてもわからないです。 とてもこまってます。よろしくお願いします。 （ソース例の「たくさんの文字」というところには、多くの文字と写真が入ります。） --------------------------- CSS↓ html{ height:100%; } body{ height:100%; width:100%; } .b1 { background-color: #333333; height: 100％; width: 100px; float: left; } .b2 { background-color: #99CC33; height: 100%; width: 200px; float: left; } BODY内↓ <div class="b1">文字</div> <div class="b2"> たくさんの文字</div>
- fablies
- お礼率50% (4/8)
- ホームページ作成ソフト
- 回答数7
- ありがとう数44
- みんなの回答 （7）
- 専門家の回答
みんなの回答
- DrFell
- ベストアンサー率55% (305/551)
No.4への補足ソースを下記のように修正してください。 ｃｓｓ部分 「.clearfix」のすべてを「#b0」に html部分 <div id="b0" class="clearfix">の「class="clearfix"」を削除 これでうまく行く筈です。
- q0190dg
- ベストアンサー率50% (4/8)
heightLine JavaScript で検索すると解決します。
- favlies
- ベストアンサー率0% (0/0)
/*包括する要素*/ #b0 { margin:0 auto;padding:0; background:#333333; width:300px; overflow:auto; } /*左側*/ #b1 { background-color:#333333; width:100px; _width:300px;/*唯一のハック*/ border-right:200px solid #99CC33; margin-right:-200px; float:left; } /*右側*/ #b2 { background-color: #9ccf31; width: 200px; float: left; } No.4の補足のｃｓｓ部分をすべて上に変えてください。 ご希望に近いものができていると思います。アンダースコアハックは利用しました。これは、ieのボックス解釈が他と違う為です。背景色とボーダー色を重ねて利用するためボックス解釈の違いを回避する為には、ハックしかないと思います。画像もcleafixも不要ですし、Firefoxやオペラも捨てなくていいです。マックや最新IEは持ってないのでわかりません。もし、お役にたてたら、動作確認できるようでしたら教えてもらえると嬉しいです。 最終的には画像を取るか、どれかのハックをとるか……になってくると思います。 http://www.k5.dion.ne.jp/~i-araki/css/gijihaikei.html を参考にしました。
- Muller3
- ベストアンサー率81% (800/979)
よく使われているのは、.b1に背景色を設定するのではなく、より上位の要素に「背景画像」を設定します。 メニュー幅分の色を付けた背景画像を用意します。 <div class="wrapper"> <div class="b1">文字</div> <div class="b2"> たくさんの文字</div> </div> とし、wrapperに背景画像を設定、repeat-yで繰り返し表示させれば、ブラウザの縦いっぱいまで背景色を表示させることができる、というものです。※画像で設定することになるので、背景色の幅は固定となります。
#1、#2です。 不本意ではありますがFirefoxやオペラ等他ブラウザを捨てて、IEのみでの表示に限りますが。 CSS記述例 * {margin:0;padding:0;} #wrapper{ width:300px;/* b1とb2のwidthを足した数値にしてください */ height:100%; background-color:#333333;/* b1のbackground-colorと必ず同じにしてください */ } #b1{/* 左側の設定*/ float:left; width:100px; height:100%; background-color:#333333; } #b2{/* 右側の設定*/ float:left; width:200px; height:100%; background-color:#99CC33; } HTML記述例 <div id="wrapper"> <div id="b1">短い文字</div> <div id="b2">たくさんの文字</div> </div>
お礼
書き込みありがとうございます！ 仕事がらみなもので、Firefoxやオペラを捨て去ることができないのです。ホント捨てたいところですが。。笑
IEとFirefoxで確認してみましたが、下記のCSS記述でしたらなんとか…。 CSS部分 * {margin:0;padding:0;} #wrapper{ width:300px; background-color:#333333; } #header{ width:100%; height:0px; background-color:#ffffff; } #b1{ float:left; width:100px; background-color:#333333; } #b2{ float:left; width:200px; background-color:#99CC33; } #footer{ width:100%; height:0px; clear:both; background-color:#ffffff; } HTML部分 <div id="wrapper"> <div id="header"></div> <div id="b1">短い文字</div> <div id="b2">たくさんの文字</div> <div id="footer"></div> </div> 上記の書き方ですと、IEで見るとヘッダーとフッター部分が白く空間が開いてしまいます。 Firefoxでは崩れてもいい、ということでしたら CSS部分から「#header」以下と「#footer」以下を HTML部分から「<div id="header"></div>」と「<div id="footer"></div>」を削除してください。 もっとうまい書き方があるのかもしれませんが、勉強不足で申し訳ありません。
お礼
わざわざご回答ありがとうございます。 何度も試してみたのですが、 やはり縦いっぱいに背景色を表示することができないようです。。
CSS部分 body{ margin:0px; padding:0px; } #b1{/* 左側の設定*/ float:left; width:100px; height:100%; background-color:#333333; } #b2{/* 右側の設定*/ float:left; width:200px; height:100%; background-color:#99CC33; } HTML部分 <div id="b1">文字</div> <div id="b2">たくさんの文字</div> でどうでしょうか。ご参考までに。
お礼
ご回答ありがとうございます。 試してみましたが、右の文字の量が多いと、同じようにうまくいかないです。。
お礼
文字数の関係で重複となりますが、 このたびはご回答ありがとうございました！
補足
書き込みありがとうございます。 先日は急いでたということもあり、 提案していただいた親要素の背景画像をリピートさせる方法でしのぎましたが、 やっと時間に余裕が持てたので、再度検証してみました。 さまざまな方にいただいたアドバイスや検索した結果、重要なポイントとして、 (min_heght、アンダースコアハック含む)や（clearfix)等があるように思えます。 思えますというのは、いまだに完全解決に至ってないからなのですが。。汗 とりあえず現時点でたどり着いたソースは下記の通りですが、 ブラウザをいっぱいに広げるとやはりうまくならないようです。 仮処置として、適当に（#b2）の（min-height: 100%）を1500PXとすると、 希望の形に近くなりましたが、下が長くなってしまったりと、あまりかっこよくありませんし、 そもそも違う気がします。 とはいえ、一応参考までに記述いたします。 このたびはアドバイスいただき、ありがとうございました。 ----------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <style type="text/css"> /*包括する要素*/ #b0 { background-color: #333333; width: 300px; min-height: 100%; _height: 100%; } /*左側*/ #b1 { width: 100px; float: left; } /*右側*/ #b2 { background-color: #99CC33; min-height: 100%; _height: 100%; width: 200px; float: left; } /*ここからclearfix*/ .clearfix:after { display: block; clear: both; height: 0; visibility: hidden; content: "."; line-height: 0; } .clearfix { display: inline-table; min-height: 1%; } /* for macIE \*/ * html .clearfix { height: 1%; } .clearfix { display: block; } /* end of for macIE */ </style> </head> <body> <div id="b0" class="clearfix"><div id="b1">1111111</div><div id="b2"> さんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字ーたくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字</div> </div> </body> </html>