CSSを使って、背景色をブラウザの縦100％につづかせたいです。

締切済

質問者：fablies
質問日時：2008/01/20 15:36
回答数：7件

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

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (7件)

最新から表示
回答順に表示

No.7

回答者： DrFell
回答日時：2012/11/15 19:53

No.4への補足ソースを下記のように修正してください。

ｃｓｓ部分
「.clearfix」のすべてを「#b0」に

html部分
<div id="b0" class="clearfix">の「class="clearfix"」を削除

これでうまく行く筈です。

- 0
- 件

通報する

No.6

回答者： q0190dg
回答日時：2009/07/03 10:58

heightLine JavaScript

で検索すると解決します。

- 0
- 件

通報する

No.5

回答者： favlies
回答日時：2008/01/27 12:33

/包括する要素/

#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 …
を参考にしました。

- 0
- 件

通報する

No.4

回答者： Muller3
回答日時：2008/01/22 21:33

よく使われているのは、.b1に背景色を設定するのではなく、より上位の要素に「背景画像」を設定します。

メニュー幅分の色を付けた背景画像を用意します。

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

とし、wrapperに背景画像を設定、repeat-yで繰り返し表示させれば、ブラウザの縦いっぱいまで背景色を表示させることができる、というものです。※画像で設定することになるので、背景色の幅は固定となります。

この回答への補足

書き込みありがとうございます。

先日は急いでたということもあり、
提案していただいた親要素の背景画像をリピートさせる方法でしのぎましたが、
やっと時間に余裕が持てたので、再度検証してみました。

さまざまな方にいただいたアドバイスや検索した結果、重要なポイントとして、
(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>

補足日時：2008/01/27 10:46

通報する

- 0
- 件

通報する

この回答へのお礼

文字数の関係で重複となりますが、
このたびはご回答ありがとうございました！

通報する

お礼日時：2008/01/27 10:47

No.3

回答者： NymphLuna
回答日時：2008/01/20 19:26

#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>

- 0
- 件

通報する

この回答へのお礼

書き込みありがとうございます！
仕事がらみなもので、Firefoxやオペラを捨て去ることができないのです。ホント捨てたいところですが。。笑

通報する

お礼日時：2008/01/27 10:44

No.2

回答者： NymphLuna
回答日時：2008/01/20 17:59

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>」を削除してください。

もっとうまい書き方があるのかもしれませんが、勉強不足で申し訳ありません。

- 0
- 件

通報する

この回答へのお礼

わざわざご回答ありがとうございます。
何度も試してみたのですが、
やはり縦いっぱいに背景色を表示することができないようです。。

通報する

お礼日時：2008/01/20 18:27

No.1

回答者： NymphLuna
回答日時：2008/01/20 16:05

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>

でどうでしょうか。ご参考までに。