こんにちは。おせわになります。

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>

回答の条件
  • 1人5回まで
  • 登録:2008/01/20 16:53:55
  • 終了:2008/01/27 16:55:03

回答(6件)

id:yoneto164 No.1

ヨネちゃん回答回数813ベストアンサー獲得回数942008/01/20 18:55:44

ポイント19pt

CSS↓

.b0 {
background-color: #333333;
height: 100%;
width: 300px;
}
.b1 {
width: 100px;
float: left;
}
.b2 {
background-color: #99CC33;
height: 100%;
width: 200px;
float: left;
}

BODY内↓

<div class="b0">
<div class="b1">文字</div>
<div class="b2"> たくさんの文字</div>
</div>

などの方法で可能です。

id:fablies2007

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

試してみたのですが、右側の文字が多いときはブラウザいっぱいに表示されても、

文字が少ないときは、文字の量につられて背景そのものが小さくなってしまい、

背景色が縦いっぱいには表示されないようです。。

2008/01/20 19:06:23
id:abtky No.2

abtky回答回数1ベストアンサー獲得回数02008/01/20 17:04:27

ポイント10pt

b1の

"%"が全角になってるからじゃないの?

id:fablies2007

スミマセン。%は記載する際のミスでした。

半角に変更しても無理なようです。

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

2008/01/20 19:08:31
id:yoneto164 No.3

ヨネちゃん回答回数813ベストアンサー獲得回数942008/01/21 01:32:54

ポイント27pt

済みません、「%」を全角のまま掲載してしまいました。

こちらではIE、Opelaにて2台のWinXpで確認しましたが大丈夫でした。

http://acappella.cc/test/takusan/

http://acappella.cc/test/takusan/02.htm


ただしNetscapeとFirefoxでは100%の解釈が違ってくるので、

CSSでの対応は難しいと思われます。

id:fablies2007

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

先日は急いでたということもあり、

親要素の背景画像をリピートさせる方法でしのぎました。

すっかり報告が遅くなり申し訳ありませんでしたが、

やっと時間に余裕が持てたので、再度検証してみました。

yoneto164さんの提案も確認させていただきましたが、

おっしゃるように、FIREFOXでは無理なようでした。

さんざん、他所(mixiやhttp://okwave.jp/qa3696950.htmlなど)でいただいたアドバイス

や検索した結果、重要なポイントとして、

(min_heght、アンダースコアハック含む)や(clearfix)等があるように思えます。

思えますというのは、いまだに完全解決に至ってないからなのですが。。汗

とりあえず現時点でたどり着いたソースは下記の通りですが、

ブラウザをいっぱいに広げるとやはりうまくならないようです。

仮処置として、適当に(#b2)の(min-height: 100%)を1500PXとすると、

希望の形に近くなりましたが、下が長くなってしまったりと、あまりかっこよくありませんし、

そもそも違う気がします。

とはいえ、一応参考までに記述いたします。

このたびはいろいろとアドバイスいただき、ありがとうございました。

また万一、進展があれば報告させていただきますが、

どうなることやら。。笑

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css"></p> <p>/*包括する要素*/</p> <p>#b0 {</p> <p>background-color: #333333;</p> <p>width: 300px;</p> <p>min-height: 100%; </p> <p>_height: 100%; </p> <p>}</p> <p>/*左側*/</p> <p>#b1 {</p> <p>width: 100px;</p> <p>float: left;</p> <p>}</p> <p>/*右側*/</p> <p>#b2 {</p> <p>background-color: #99CC33;</p> <p>min-height: 100%; </p> <p>_height: 100%;</p> <p>width: 200px;</p> <p>float: left;</p> <p>}</p> <p>/*ここからclearfix*/</p> <p>.clearfix:after { </p> <p>display: block; </p> <p>clear: both; </p> <p>height: 0; </p> <p>visibility: hidden; </p> <p>content: "."; </p> <p>line-height: 0; </p> <p>} </p> <p>.clearfix { </p> <p>display: inline-table; </p> <p>min-height: 1%; </p> <p>} </p> <p>/* for macIE \*/ </p> <p>* html .clearfix { </p> <p>height: 1%; </p> <p>} </p> <p>.clearfix { </p> <p>display: block; </p> <p>} </p> <p>/* end of for macIE */</p> <p></style>

</head>

<body>

1111111

さんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字ーたくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字たくさんの文字

</body>

</html>

2008/01/27 10:05:42
id:tabbycats No.4

tabbycats回答回数14ベストアンサー獲得回数32008/01/21 03:10:06

ポイント18pt
html,body {
	height: 100%;
}
.b0 {
	background-color: #333333;
	width: 300px;
	min-height: 100%;
	float: left;
}
* html .b0 {
	height: 100%; /* スターハック */
}
.b1 {
	width: 100px;
	float: left;
}
.b2 {
	background-color: #99CC33;
	width: 200px;
	float: left;
}
<div class="b0">
<div class="b1">文字</div>
<div class="b2">たくさんの文字</div> 
</div>

b1とb2をb0(親ボックス)で囲みます。

b0にも「float: left;」を指定し、widthを子ボックスの幅の合計にします。

また、「height」を「min-height」に変更します。

このプロパティはIE6以降に対応していないので、スターハックで対応します。


上記の方法で解決できると思いますが、左ボックスの縦が右ボックスより長くなった場合、

右ボックスの背景色が縦100%になりません。

そこで、背景画像を使用します。


html,body {
	height: 100%;
}
.b0 {
	background: url(./test.gif) repeat-y left top;
	width: 300px;
	min-height: 100%;
	float: left;
}
* html .b0 {
	height: 100%; /* スターハック */
}
.b1 {
	width: 100px;
	float: left;
}
.b2 {
	width: 200px;
	float: left;
}
<div class="b0">
<div class="b1">文字</div>
<div class="b2">たくさんの文字</div> 
</div>

幅300px(左100pxが#333333、右200pxが#99CC33)の画像を用意します。

高さは1pxでOKです。

この画像をb0の背景画像として指定すれば、b1、b2、どちらが長くても背景が継続されます。

id:fablies2007

わざわざご回答ありがとうございます!

じつは結局自分も、今回は画像を使う方法で回避しました。

やはりCSSではむずかしいということでしょうか。。

ブログとかみて引き続き勉強してみたいです。

2008/01/27 10:14:41
id:naynay No.5

naynay回答回数4ベストアンサー獲得回数12008/01/22 02:18:05

ポイント18pt

高さを100%に指定しても、ウインドウに対する100%では表示できません。

こういった場合、その幅の背景色の画像を用意して

bodyまたは内容を囲っているDIVなどに、縦にリピートさせればOKです。

例)

幅100px、#333333のgif画像を作成する(高さは1pxでOK)

body{

background-image: url(作成した背景画像の場所を指定);

background-repeat: repeat-y;

background-position: left top;

}

id:fablies2007

ありがとうございます。

やはりそうなってしまうようですね。

CSSでの方法も引き続き探してみたいです。

2008/01/27 10:16:40
id:yukiyume No.6

yukiyume回答回数4ベストアンサー獲得回数02008/01/23 01:02:11

ポイント18pt

画像を使用する(CSSだけで実現していない)、かつCSSハックを使用しております。

(更に、他の方の回答と被っている可能性もあるなぁと…)

ですので、ご要望に沿えない内容でしたら、ポイントは結構です。


BODY内はそのままです。

CSSは以下のようになります。

html,body {
 height: 100%;
 margin: 0;
 padding: 0;
 background: url("back.png") repeat-y;
}

.b1 {
 width: 100px;
 float: left;
}

.b2 {
 background-color: #99CC33;
 min-height:100%;
 _height: 100%;
 width: 200px;
 float: left;
}

body要素に背景画像として設定している「back.png」は、左側(b1)の背景色(#333333)1色の、横幅が100px(b1の横幅と同じ)の画像です。縦幅は1pxでOKです。

この方法で、IE6、Firefox、Operaでは問題なく表示されました。

右側(b2)の文字数が多いときも少ないときも、どちらの場合でも大丈夫です。

id:fablies2007

画像以外では、やはりなかなかむずかしそうですね。

引き続き勉強してみたいと思います。

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

2008/01/27 10:19:03

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません