<div id="box">のなかに<div id="left">と<div id="right">があるとします。
<div id="box">
<div id="left"></div>
<div id="right"></div>
</div>
この時、rightの中身のコンテンの量によって縦の長さが可変させたいのですが、それに追従する形でleftも同じ縦の長さを保ってほしいと思っています。
(leftは背景画像をrepeat-yさせたいため)
そこでまず、leftが常にBoxにたいして最大の高さを保つように、heightを100%に指定してみました。
現在、rightが長文であると仮定し、height:2000pxを指定しても、leftは縦幅を追従してくれません。
これについて解決方法がわかる方がいらっしゃいましたらよろしくお願いいたします。
#box
{
width: 400px;
}
#box #left
{
float: left;
width: 100px;
height:100%;
background:url(images/left.jpg) repeat-y;
}
#box #right
{
float: left;
width: 300px;
height:2000px;
background:url(images/right.jpg) repeat-y;
}
ちなみに現在Boxの高さ(height)はrightコンテンツに左右されるため、絶対値を指定できません。floatについては知識不足のため不要かもしれません。
よろしくお願いいたします。
No.4
153
20
150pt
＞実はこの問題は構成要素がa、bの２つの場合はできるのですが、divが横に３つ以上並ぶ場合はちょっと混乱してしまいます。
途中にコメント入れましたが、最初の例のように横幅を指定できるなら、親(#box)に、それぞれ塗り分けた共通背景を入れるのが、簡単です。
そうでないなら、単純に入れ子にすればいい話です。下にサンプルをつけます（一番右側の高さが一番大きいという前提です）。
＞親の構成要素いっぱいまで自動的に広がってくれるような(この場合はboxのheightいっぱいに自動的に広がるleftのheightを設定する)CSSの手法はないのでしょうか。
CSS2に対応したブラウザなら、inheritプロパティを使えば、親要素を継承しますが、多くの人が使用しているIE6で対応していないので、使わないほうが良いでしょう。
３つの場合のサンプル
28
27
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--
#box { width:400px; background:red;}
#left { float: left; width: 100px; background:transparent;}
#box2 { float: left; background:yellow; }
#middle { float: left; width: 100px; background:transparent;}
#right { float: left; width: 200px; background:green; }
-->
</style>
</head>
<body>
<div id="box">
<div id="left">左側</div>
<div id="box2">
<div id="middle">中央</div>
<div id="right">右側<br />右側<br />右側<br />右側<br />右側</div>
</div>
</div>
</body>
</html>
No.1
15320
50pt
そもそも、その考え方では、うまくいきません。
考え方として、
・BOXに、LEFT側で使いたい背景画像を設定します。
・その上で、LEFTの背景なし、RIGHTに背景を指定。
そうすれば、お望みのものができるはずです。
＃BOXは、LEFTまたはRIGHTの大きいほうに追従しますから。
＃但し、RIGHTの方が高さが小さい場合に逆パターンになります。
＃これも解決したければ、BOXに両方あわせた画像をつけることになります。
なので、
background:url(images/left.jpg) repeat-y left;
を#boxに入れて、
#box #leftからbackgroundを削除すれば、お望みのとおりになるかと。
＃きちんとブラウザで確認していませんので、その他にも修正が必要な箇所があるかもしれません。
ご参考まで。
ありがとうございます。早速のご回答ありがとうございます。これでうまくできそうです。
実はこの問題は構成要素がa、bの２つの場合はできるのですが、divが横に３つ以上並ぶ場合はちょっと混乱してしまいます。（実はa、bに単純化して質問していたため）
そもそもテーブルとは概念が異なるのかもしれませんが、テーブルのときのように親の構成要素いっぱいまで自動的に広がってくれるような(この場合はboxのheightいっぱいに自動的に広がるleftのheightを設定する)CSSの手法はないのでしょうか。以上の方法以外で回答を持っている方がいらっしゃいましたら引き続きよろしくお願いいたします。
詳細にご回答いただいた方には100point以上を差し上げます。
No.2
2915301
80pt
既にご承知の事と思いますがスタイルシートは親から子へ継承されます。
また、特別な指定が無い場合はautoと見なされます。
従いまして、親（box）にてheightの指定が無い状態で
#box #left {height:100%}
#box #right {height:2000px}
と書いたとすれば
#box #left {height:auto}
#box #right {height:2000px}
といったような形になってしまって希望には沿えません。
親（box）にてheight:2000pxが指定されていれば
#box #left {height:100%}
#box #right {height:100%}
という記述は
#box #left {height:2000px}
#box #right {height:2000px}
と同じ意味になりますので
例としてあげておられたように2000pxと決めてしまえるのであれば
前述のように親に指定しておけばよかったりするので意外と楽です。
しかしながら、本当の問題は2000pxと決め打ち出来ないからではないでしょうか？
実は、決め打ち出来ない場合の直接的な解決方法はなくて
回答１で頂戴したような入れ子の形になったりするわけですが、ご察しの通り
親→子→孫→曾孫などとなって、どんどんと複雑なものになってしまいます。
複雑にはなっていきますが、それほど何重にもネストする可能性もまた無いと思います。
（他にも手段はあるかと思いますが、今回の例に対しての回答としては最善の一手だと思います）
話はいきなりそれますが、今回の目的は背景ですよね？
左、中央、右、それぞれに画像があるのだとすれば、
それらを横に並べて１つの画像にしたものを作成しておいて
親の背景画像としておけば子の方は透過にしておくだけ・・・。
cssだけに頼らない妥協案もあわせて考えてみてください。
丁寧にありがとうございます。2000pxと決めうちできない為に困っているといったところです。
皆さんのお答えでもやはり、直接的な解決方法はなさそうですね。できないということがわかったことがかなり勉強になりました。いろいろな解説書をみてみましたが、やはり皆さん（＃１、＃２、＃３さん共通）の手法で背景をネストしていく手法でサイトを作っているところがほとんどのようです。
３以上のdivにしたい場合は合成させて単純化するか、その数だけネストして、必要であればpngで透過させる手法で考えていこうと思います。
このたびはありがとうございました。
No.3
141
10pt
3つ以上のボックスも考えるのでしたら、#boxの背景にそれぞれの背景画像を組み合わせたものをrepeat-yで設定するのはいかがでしょうか。
ありがとうございます。やはりその方法が妥当なのですね。
No.4
15320
ここでベストアンサー
150pt
＞実はこの問題は構成要素がa、bの２つの場合はできるのですが、divが横に３つ以上並ぶ場合はちょっと混乱してしまいます。
途中にコメント入れましたが、最初の例のように横幅を指定できるなら、親(#box)に、それぞれ塗り分けた共通背景を入れるのが、簡単です。
そうでないなら、単純に入れ子にすればいい話です。下にサンプルをつけます（一番右側の高さが一番大きいという前提です）。
＞親の構成要素いっぱいまで自動的に広がってくれるような(この場合はboxのheightいっぱいに自動的に広がるleftのheightを設定する)CSSの手法はないのでしょうか。
CSS2に対応したブラウザなら、inheritプロパティを使えば、親要素を継承しますが、多くの人が使用しているIE6で対応していないので、使わないほうが良いでしょう。
３つの場合のサンプル
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<title>Style Sheet Sample</title>
<style TYPE="text/css">
<!--
#box { width:400px; background:red;}
#left { float: left; width: 100px; background:transparent;}
#box2 { float: left; background:yellow; }
#middle { float: left; width: 100px; background:transparent;}
#right { float: left; width: 200px; background:green; }
-->
</style>
</head>
<body>
<div id="box">
<div id="left">左側</div>
<div id="box2">
<div id="middle">中央</div>
<div id="right">右側<br />右側<br />右側<br />右側<br />右側</div>
</div>
</div>
</body>
</html>
詳細をありがとうございます。
３つを並べて最大化するというのではなく、３つを入れ子構造にしていくということですね。この手法が一番応用が効きそうです。ほかのサイト等もこの情報をもとに、解説書等をみていくと、これと同じような入れ子による作りになっている様です。
一つ霧が晴れました。ありがとうございました。
1
3
1
1
1
1
2
1
2
1
1
詳細をありがとうございます。
３つを並べて最大化するというのではなく、３つを入れ子構造にしていくということですね。この手法が一番応用が効きそうです。ほかのサイト等もこの情報をもとに、解説書等をみていくと、これと同じような入れ子による作りになっている様です。
一つ霧が晴れました。ありがとうございました。