質問: 2つの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については知識不足のため不要かもしれません。 よろしくお願いいたします。
回答: そもそも、その考え方では、うまくいきません。 考え方として、 ・BOXに、LEFT側で使いたい背景画像を設定します。 ・その上で、LEFTの背景なし、RIGHTに背景を指定。 そうすれば、お望みのものができるはずです。 #BOXは、LEFTまたはRIGHTの大きいほうに追従しますから。 #但し、RIGHTの方が高さが小さい場合に逆パターンになります。 #これも解決したければ、BOXに両方あわせた画像をつけることになります。 なので、 background:url(images/left.jpg) repeat-y left; を#boxに入れて、 #box #leftからbackgroundを削除すれば、お望みのとおりになるかと。 #きちんとブラウザで確認していませんので、その他にも修正が必要な箇所があるかもしれません。 ご参考まで。