i have vertical , extensible menu component within page.

i want to:

1.occupy 100% of screen's height.

2.enable scrolling rather extending underneath screen.

for now, using following css:

#enablescrolling {     overflow-y: scroll;     height: 100%; }

however, list extends underneath screen instead of allowing scrolling. therefore, using height: 100%; doesn't seem work.

how should correctly?

you can either make menu size of view port using viewport height style

solution 1

#enablescrolling{ height:100vh; overflow-y:scroll; }

here jsfiddle try scrolling red, begin scrolling in blue. see red box high window.

or can position absolute make height of entire website this:

solution 2

#enablescrolling{ position:absolute; top:0; height:100%; width:100%; overflow-y:scroll; }

with second jsfiddle can see red take 100% height of page, try scrolling red, scroll blue. red never leave viewport.

if element not @ top

you can apply positioning move element top, in same way works answer 2.

#enablescrolling{ position:absolute; /*position @ top*/ top:0; /*position @ left*/ left:0; height:100vh; overflow-y:scroll; }