- 締切済み
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)
- q0190dg
- ベストアンサー率50% (4/8)
- favlies
- ベストアンサー率0% (0/0)
- Muller3
- ベストアンサー率81% (800/979)
#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>