2カラムサイト高さ100% 左右別々にスクロール

質問

サイトの構成は2カラムのみのサイトで、左にナビ、右にコンテンツになります。
左右どちらもheight100%で、両方とも縦に別々のスクロールを行いたいと考えております。

そこで、main（左）とsub（右）を作りfixedで固定し、100%にしました。
その中に固定したエリアを導入しスクロールバーを表記させようと思い下記のような記述をいたしました。

main_sとsub_sのheightをpxで表記するとうまく動作します。
しかし、%にするとスクロールバーが表示されずfixedの影響で画面が固定されてしまいます。

#main{
float:left;
width:400px;
position: fixed;
background-color:pink;
height: auto;
min-height: 100%;
}
#main_s {
height:90%;
overflow-y:scroll;
}

#sub{
float:left;
width:300px;
position: fixed;
background-color:yellow;
height: auto;
min-height: 100%;
margin-left:400px;
}
#sub_s {
height:90%;
overflow-y:scroll;
}

左右のカラムを別々にスクロールをさせたいのですが、お力添えいただけたら幸いです。

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

回答No.1

tkmojo · ベストアンサー

#mainと#subのmin-height:100%;をheight:100%;にしただけでできましたよ。
height:auto;も不要。
チェックしたブラウザ：IE9、Chromem(最新)、Firefox(最新)、Safari(Windows最終)

なぜmin-heightとheight:auto;なのかが不明ですが、
もしこれをやりたいんだとすればheightが足りてないです。
http://css-eblog.com/csstechnique/min-height-forie.html

ただ、目的から考えてmin-heightを実現させる意味がないので普通にheight:100%;だけでいいと思います。

お礼

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

おっしゃる通りmin-height:100%;をheight:100%;にしたらできました。
助かりました。

ありがとうございます！