ID登録せずに、無料で質問できる♪ 教えて!gooアプリ>>

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


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

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


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

このQ&Aに関連する最新のQ&A

A 回答 (2件)

いまいちイメージが沸かなくて


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

ひとつの参考意見として。
    • good
    • 0
この回答へのお礼

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

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

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

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

お礼日時:2009/05/22 18:18

> 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 …
http://coliss.com/articles/build-websites/operat …

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

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

お礼日時:2009/06/12 03:51

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qhtml で 変数を定義できますか?

html(できればjava不使用)で変数に文字列をいれてつかう、またはそれに近いことはできないでしょうか?

例**************************
$color1="#000000"

<tr bgcolor=$color1>内容1<tr>
<tr bgcolor=$color1>内容2<tr>
****************************
みたいな感じです

Aベストアンサー

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:orika1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
.parson1:before{content:"田中";}
p.age1:after{content:"36歳";}
-->
</style>
</head>
<body>
<h1>サンプル</h1>
<p class="parson1">は男の子</p>
<p class="parson1 age1">の年齢は</p>
<p>私の彼氏は<span class="parson1">君だよ</p>
</body>
</html>

調べりゃ分かることは???だけど。

CSS2で無理やり作れば・・簡単だけど・・・
生成内容、自動番号振り、リスト ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/generate.html )
 本来はXSLTで作るほうがよいかと・・・
 <th><xsl:value-of select="parson" />の歌</th>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<met...続きを読む


人気Q&Aランキング