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

2つのdiv縦幅の可変について

<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については知識不足のため不要かもしれません。

よろしくお願いいたします。

●質問者: happy1980
●カテゴリ:ウェブ制作
✍キーワード:.jpg background BOX URL コンテンツ
○ 状態 :終了
└ 回答数 : 4/4件

▽最新の回答へ

1 ● easygoings
●50ポイント

そもそも、その考え方では、うまくいきません。

考え方として、

・BOXに、LEFT側で使いたい背景画像を設定します。

・その上で、LEFTの背景なし、RIGHTに背景を指定。

そうすれば、お望みのものができるはずです。

#BOXは、LEFTまたはRIGHTの大きいほうに追従しますから。

#但し、RIGHTの方が高さが小さい場合に逆パターンになります。

#これも解決したければ、BOXに両方あわせた画像をつけることになります。

なので、

background:url(images/left.jpg) repeat-y left;

を#boxに入れて、

#box #leftからbackgroundを削除すれば、お望みのとおりになるかと。

#きちんとブラウザで確認していませんので、その他にも修正が必要な箇所があるかもしれません。

ご参考まで。

◎質問者からの返答

ありがとうございます。早速のご回答ありがとうございます。これでうまくできそうです。

実はこの問題は構成要素がa、bの2つの場合はできるのですが、divが横に3つ以上並ぶ場合はちょっと混乱してしまいます。(実はa、bに単純化して質問していたため)

そもそもテーブルとは概念が異なるのかもしれませんが、テーブルのときのように親の構成要素いっぱいまで自動的に広がってくれるような(この場合はboxのheightいっぱいに自動的に広がるleftのheightを設定する)CSSの手法はないのでしょうか。以上の方法以外で回答を持っている方がいらっしゃいましたら引き続きよろしくお願いいたします。

詳細にご回答いただいた方には100point以上を差し上げます。


2 ● kn1967
●80ポイント

既にご承知の事と思いますがスタイルシートは親から子へ継承されます。

また、特別な指定が無い場合は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と決め打ち出来ないからではないでしょうか?


実は、決め打ち出来ない場合の直接的な解決方法はなくて

回答1で頂戴したような入れ子の形になったりするわけですが、ご察しの通り

親→子→孫→曾孫などとなって、どんどんと複雑なものになってしまいます。

複雑にはなっていきますが、それほど何重にもネストする可能性もまた無いと思います。

(他にも手段はあるかと思いますが、今回の例に対しての回答としては最善の一手だと思います)


話はいきなりそれますが、今回の目的は背景ですよね?

左、中央、右、それぞれに画像があるのだとすれば、

それらを横に並べて1つの画像にしたものを作成しておいて

親の背景画像としておけば子の方は透過にしておくだけ・・・。

cssだけに頼らない妥協案もあわせて考えてみてください。

◎質問者からの返答

丁寧にありがとうございます。2000pxと決めうちできない為に困っているといったところです。

皆さんのお答えでもやはり、直接的な解決方法はなさそうですね。できないということがわかったことがかなり勉強になりました。いろいろな解説書をみてみましたが、やはり皆さん(#1、#2、#3さん共通)の手法で背景をネストしていく手法でサイトを作っているところがほとんどのようです。

3以上のdivにしたい場合は合成させて単純化するか、その数だけネストして、必要であればpngで透過させる手法で考えていこうと思います。

このたびはありがとうございました。


3 ● te2889
●10ポイント

3つ以上のボックスも考えるのでしたら、#boxの背景にそれぞれの背景画像を組み合わせたものをrepeat-yで設定するのはいかがでしょうか。

◎質問者からの返答

ありがとうございます。やはりその方法が妥当なのですね。


4 ● easygoings
●150ポイント ベストアンサー

>実はこの問題は構成要素がa、bの2つの場合はできるのですが、divが横に3つ以上並ぶ場合はちょっと混乱してしまいます。

途中にコメント入れましたが、最初の例のように横幅を指定できるなら、親(#box)に、それぞれ塗り分けた共通背景を入れるのが、簡単です。

そうでないなら、単純に入れ子にすればいい話です。下にサンプルをつけます(一番右側の高さが一番大きいという前提です)。

>親の構成要素いっぱいまで自動的に広がってくれるような(この場合はboxのheightいっぱいに自動的に広がるleftのheightを設定する)CSSの手法はないのでしょうか。

CSS2に対応したブラウザなら、inheritプロパティを使えば、親要素を継承しますが、多くの人が使用しているIE6で対応していないので、使わないほうが良いでしょう。

3つの場合のサンプル

<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>
◎質問者からの返答

詳細をありがとうございます。

3つを並べて最大化するというのではなく、3つを入れ子構造にしていくということですね。この手法が一番応用が効きそうです。ほかのサイト等もこの情報をもとに、解説書等をみていくと、これと同じような入れ子による作りになっている様です。

一つ霧が晴れました。ありがとうございました。

関連質問


●質問をもっと探す●



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