htmlでheightが自動で延長

質問

divを使ってデザインしているのですが、
全体のデザインの入る#wrapの中に
floatを左に設定した#leftと、
floatを右に設定した#rightがあります。

#leftにはメニューバーを、#rightにはコンテンツを入れるのですが、
コンテンツの量はページによって全然違うので、
#leftの長さを設定できません…。
#leftには背景色がついているので、途中でとぎれない様にしたいです。
短く設定すると、下が切れますし、
長く設定すると、情報量が無いページでは、ただ縦に長いだけの空白になってしまいます。
min-heightというのがあるらしいのですが、なぜか反映されなくて…

#rightの長さに合わせて、#leftを自動で伸び縮みさせたいのですが…
可能でしょうか？

質問の仕方が下手だったらゴメンなさい！
誰か助けてください…。よろしくお願いします

回答No.1

askaaska · ベストアンサー

いまいちイメージが沸かなくて
再現できないんだけど
#leftと#rightをheight:100%じゃダメかしら。
そうすれば両方とも高さが#wrapの高さになるわ。

ひとつの参考意見として。

お礼

すごく早いアドバイスありがとうございます！
それが、#wrapも横幅のみ設定していて
縦はアクティブに変わるようになってるんです…

#wrapの中にヘッダーを入れて、
左に#leftのメニューバーを入れて
右に#フラッシュと、#right(その中も縦に2分割…)
ごちゃごちゃすぎて100%にしても上手くいきませんでした…。

#wrapの縦の最短の長さが設定できたなら、
#leftのみ100%にしたらなんとかなりそうなんですが…

#wrapの長さを設定した時はこれ凄く最適ですね！
とてもためになりました、本当にありがとうございます！

回答No.2

abril

> min-heightというのがあるらしいのですが、なぜか反映されなくて…

IE6とかでご覧になってますか？
IEだと7より前のヴァージョンではmin-heightプロパティが実装されていません。Firefox等他のモダン・ブラウザでは正しく効きます。
ちなみに、IE6だとheightプロパティを指定しているとmin-heightプロパティと同様の動作（ボックスの実際の内容量がその高さを超えてもはみ出さず勝手に伸びてくれる。heightプロパティとして本来は正しくない挙動です。）をします。

お悩みの症状は、頻繁に出てくる質問のひとつですね。

> #rightの長さに合わせて、#leftを自動で伸び縮みさせたいのですが…

#rightと#leftには親子関係が生じてないので、一方の長さに合わせて自動的にもう一方を合わせるという考え方ができないのですが、#wrapという共通の親を持つので、#wrapに対しての#rightと#leftの高さの描画領域を常に同じにする、という事であれば可能です。

方法は色々ありますが、下記などは良く使われる手法の一つです。

http://coliss.com/wp-content/uploads/css-columns-padding-revised.html
http://coliss.com/articles/build-websites/operation/css/1591.html

あとは、実際の#rightと#leftのボックスの高さは異なったままで、両者の背景画像合わせて一つにして#wrapの背景画像として描画する事で、「見た目だけ揃える」という方法もあります。つまり、#wrapが幅720px、#leftが幅200pxで背景色が青、#leftが幅520pxで背景色が白、であれば左から200pxが青で残りの520pxが白という横幅が720px（縦は適当）の画像を作成し、それを#wrapにbackgroundプロパティで縦方向にのみリピートさせ、#leftと#rightには背景を指定しない、という事です。

お礼

ありがとうございました！！