人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

こんにちは。おせわになります。
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>

●質問者: fablies2007
●カテゴリ:コンピュータ ウェブ制作
✍キーワード:b2 background-color BODY CSS HTML
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● ヨネちゃん
●19ポイント

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>

などの方法で可能です。

◎質問者からの返答

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

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

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

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


2 ● abtky
●10ポイント

b1の

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

◎質問者からの返答

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

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

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


3 ● ヨネちゃん
●27ポイント

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

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

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

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


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

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

◎質問者からの返答

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

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

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

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

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

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>


4 ● tabbycats
●18ポイント
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、どちらが長くても背景が継続されます。

◎質問者からの返答

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

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

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

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


5 ● naynay
●18ポイント

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

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

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

例)

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

body{

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

background-repeat: repeat-y;

background-position: left top;

}

◎質問者からの返答

ありがとうございます。

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

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


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ