Javascript：具有可滚动的固定位置元素

Question

I'm trying to achieve the following:
I have a pop-in menu docked to the left side of the screen.
The menu has only a small tab visible. Upon hover - it pops to accommodate its content.
The problem is, my pages are sometimes a few screens in height. And sometime, so is my menu.
I wish to be able to dock my menu to a fixed position (so the tab is always visible), and have the menu scrollable, without the ugly scrollbars.

How could this be achieved?

Answer 1

Add to your css:

html,body { height: 100%; }

#menu { height: 100%; overflow: auto; position: absolute; top: 0px; }

Make sure the #menu is a direct child of body.

If this doesn't work, give me a link to a demo, or make one in http://jsfiddle.net/