左メニューをCSSで固定したい

質問

左メニューを固定しスクロールはメイン部分のみするページをHTMLとCSSで作っています。
固定自体はできたのですが、私が作っているページのメニューの項目が多すぎて、メニュー部分を固定するとブラウザ内に入らない下の方の項目が見えなくなってしまいます。
これをフレームを使わずに作ることはできないでしょうか？
できればカクカクしないようなメニューが作りたいです。

■■■■■■■■■■■■■
■menu　　■　main　　　　　　■
■　 　　 　■　　　　　　 　　　■　　　
■ 　 　　 　■　　　　　　 　　　■
■　　 　 　■　　　　　　 　　　■
■■■■■■■■■■■■■
・メニュー部分は固定だが、一番下の項目が見えるまではスクロールできる
・メニューが一番下までいったらメニューはそこで固定してメイン部分だけスクロール

【HTML】
<div id="main">
メインの内容
</div>
<div id="menu">
<ul>
<li>メニュー1</li>
<li>メニュー2</li>
<li>メニュー3</li>
<li>メニュー4</li>
・・・・（26項目）
</ul>
</div>

【css】
#main{
float:right;
}
#menu{
width:160px;
position:fixed;
_position:absolute;
top:30px;
left:0px;
}

回答No.1

dezimac · ベストアンサー

メニューのCSSを以下のようにしてみたらどうでしょう。

#menu{
width:160px;
position:fixed;
_position:absolute;
top:30px;
left:0px;

height: 100%;
overflow: auto;

}

overflow: auto;
としておけば領域からはみ出した場合だけ、スクロールバーが表示されます。

お礼

表記のやり方でやったらできました。
ありがとうございます。
助かりました。