Display scroll bar inside fixed position element

Question

I have elements ( .block ) inside a div ( #block_list ). The parent of #block_list is another div ( #block_list-wrapper ) that has a fixed position. Now that #block_list-wrapper has a fixed position, some #block_list elements #block_list not displayed. I would like to show them using the scroll bar.

HTML:

 <div id="block_list-wrapper"> <div id="handle-wrapper"> <div id="handle"> <i class="fa fa-chevron-right"></i> <i class="fa fa-chevron-left"></i> </div> </div> <div id="block_list"> <div class="one_column_block-1 block"> <img src="static/image/one_column_block-1.png"> </div> <div class="one_column_block-2 block"> <img src="static/image/one_column_block-2.png"> </div> ... ... ... <div class="one_column_block-1 block"> <img src="static/image/four_column_block-3.png"> </div> </div> </div> 

Demo Code Codepen.io

I tried adding overflow: scroll so

 #block_list-wrapper #block_list { width: 250px; overflow: scroll; } 

but that didn't help either.

How to show a scroll bar to display all elements ( .block ) inside #block_list ?

Answer 1

Add the following line of code to set the height of the element:

 $("#block_list").css("height", $(window).height()) 

Updated CodePen

Another solution would obviously be to do this with CSS, as the other answers say.

Answer 2

Add 100% height to your block_list and block_list-wrapper, and then add overflow: scroll to block_list.

Answer 3

You do not have the specified height. You can specify the height of the container in one of the following ways:

• Point height: 100vh to #block_list-wrapper #block_list or
• Set height: 100vh to #block_list-wrapper and then height:100% to #block_list-wrapper #block_list .

Your code: http://codepen.io/anon/pen/jbBgpo

Answer 4

You need to set a fixed height for the block_list element. You can use the vh property and set heigth: 100vh .

Updated CodePen here

Answer 5

Give the element height so you can get the scroller on the div . The following link code works fine.

https://jsfiddle.net/LLrkfvhf/