ヘッダー・左カラムは固定、右カラム可変のレイアウト

質問

CSSでレイアウトを制作中なのですが、途中から分からず止まっております。

今の状況は縦に可変した時、左カラムのスクロールバーが最大まで表示されない状態です。また、右カラムは途切れてしまいます。
height100％に対し、ヘッダでピクセル指定しているからだと思うのですが。

■CSS
*{ margin:0px; padding:0px; }

/** html */
html,body {
height:100%;
min-height:500px;
overflow-y:hidden;
}
/** ヘッダ */
#header {
height:125px;
width:100%;
}
/** 左・右カラムの囲い */
#container {
height:85%;
margin-left:400px;
}
/** 左カラム */
#menu {
float:left;
height:85%;
margin-left:-400px;
overflow:auto;
width:400px;
}
/** 右カラム */
#main{
float:right;
height:100%;
margin-left:430px;
overflow:auto;
width:100%;
}
/** フッタはありません */

■HTML側
<div id="header">
ヘッダ
</div>
<div id="container">
<div id="menu">
左カラム
</div>
</div>
<div id="menu">
右カラム
</div>

以上です。

理想のレイアウトが、GoogleマップもしくはYahoo!マップの様に組みたいのですが・・・
http://maps.google.co.jp/　Googleマップ
http://map.yahoo.co.jp/　　Yahooマップ

どなたかお力添えをお貸しください。
宜しくお願いします。

回答No.1

metametamu · ベストアンサー

HTMLは書き間違えだと思いますが一応修正しときます。

<div id="header">
ヘッダ
</div>
<div id="container">
<div id="menu">
左カラム
</div>
<div id="main">
右カラム
</div>
</div>

今回のような場合はヘッダーにposition:absolute;を使うといいと思います。
floatは幅を可変にしたいメインカラムには指定しないようにすればwidthの指定にも困りませんよ。
回答には載せていませんが、menuとmainの最初の子要素にmarginなりpaddingなりで125pxの余白を上方向に取ってヘッダーに隠れないようにしてください。

*{ margin:0px; padding:0px; }

/** html */
html,body {
height:100%;
min-height:500px;
overflow-y:hidden;
}
/** ヘッダ */
#header {
position:absolute;
top:0;
left:0;
height:125px;
width:100%;
}
/** 左・右カラムの囲い */
#container {
height:100%;
overflow:hidden;
}
/** 左カラム */
#menu {
float:left;
margin-right:30px;
height:100%;
overflow:auto;
width:400px;
}
/** 右カラム */
#main{
height:100%;
overflow:auto;
}

ちなみに右カラムではなく左カラムにmargin指定を変更しましたが、どうやらchrome(ver. 9.0.597.10で確認)ではoverflow:auto;関連でバグがあるようで今回の記述で右カラムにmargin-left:430px;を指定すると強制的に右方向にも同じだけマージンを取ってしまうためです。

お礼

解答ありがとうございます。

HTMLの記述は確かに誤っておりました。

解答していただいた内容を実装しましたが、#containerのheight:100%のままtopからマージンされており、上下に可変した時に、ページ下が途切れてしまいました。

結果、勝手ながらあまり良い方法ではないのですが、JavaScriptを使用してブラウザのサイズを取得して可変に対応するように変更しました。無効にされた場合は、固定のサイズにする予定です。

また機会があるようでしたら、お力添え宜しくお願いします。

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