ヘッダー・左カラムは固定、右カラム可変のレイアウト
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マップ
どなたかお力添えをお貸しください。
宜しくお願いします。
