２つのコンテンツの高さを合わせたい

質問

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

ホームページを作っているのですが、まだまだ初心者なのでどなたかご教授ください。

ナビの部分（青）とコンテンツの部分（白）の背景色をかえたのですが、どうしても２つの高さが合わず困っております。

ナビの部分だけ短くなってしまい、青が短く、その下が白くなってしまい不恰好です。

ＣＳＳに　height:100%; と両方に書くと、やたら長くなってしまい、空白が目立ちます。

どのようにしたら、適度な長さで２つの長さを合わせることができるのでしょうか？
コンテンツ＝main ナビ＝naviです
#main{
width:600px;
height:100%;
color:#000000;
background-color:#FFFFFF;
float:left;
padding:0 0 100px 0;
}
#navi{
width:200px;
height:auto;
float:left;
background-color:#E3EBF4;
padding:10px 0 0 0;
height:100%;
}

複数のページを作りたいので、数値で指定（ height:500px;）以外の方法で考えています。

説明が下手で申し訳ないのですが、どなたかお力をお貸し下さい。
よろしくお願いいたします。

回答No.2

noname#66720 · ベストアンサー

まず#mainと#naviをdiv要素で括ってやります。
その背景に画像を指定したりすれば良いのではないでしょうか？

画像を作るのがめんどくさい場合はdivに#navi用の背景色を与えれば上手く見えるのではないかと思いますが。

<div id="content">
<div id="main">
メイン
</div>
<div id="navi">
ナビ
</div>
</div>

#content {
background-color:#E3EBF4;
}

#main{
width:600px;
color:#000000;
background-color:#FFFFFF;
float:left;
padding:0 0 100px 0;
}
#navi{
width:200px;
height:auto;
float:left;
background-color:#E3EBF4;
padding:10px 0 0 0;
}

ただし、#contentの次にくる要素でちゃんとfloatをクリアしてください。

お礼

ご親切な解説のおかげで無事思ったとおりのレイアウトができました。ありがとうございます。

回答No.1

yumitsuki

コンテンツの部分と、ナビの部分の、両方を含む上位の<div>～</div>を設けて、この上位の部分で背景画像を指定する、という方法はいかがでしょうか。
コンテンツが左側、ナビが右側、の場合を想定してみました。

html部分：

<div id="container">

<div id="main">
コンテンツの部分
</div>

<div id="navi">
ナビの部分
</div>

</div>

css部分：
#container{
margin: 0px;
border: none;
padding: 0px;
width: 800px;
background: url(haikei.gif) repeat-y;
}

#mail{
margin: 0px;
border: none;
padding: 0px;
float: left;
width: 600px;
}

#navi{
margin: 0px;
border: none;
padding: 0px;
float: left;
width: 200px;
}

haikei.gifの説明：
・幅800ピクセル、高さは任意。
・コンテンツを左側に配置する場合は、左側600ピクセルを白、右側200ピクセルを青に塗り潰します。

#containerが上位の部分で、その背景画像として haikei.gif を設定します。縦方向に繰り返されるので、表示されるページ全体が2色に分けられます。なお、ウィンドウの幅が800ピクセル以上となる場合に備えて、body全体の背景色も設定した方がよろしいかと思います。

参考URL：

http://www.tohoho-web.com/css/reference.htm#background

お礼

丁寧な解説ありがとうございます。おかげさまでなんとか出来ました。感謝いたします。