scroll issue of scrollable dynamic content in fixed container - html

Question

I have a fixed container in which I placed a list (ul) with dynamic number of items.
at the top of the container there's a title.
It seems that the presence of the title messes the list scroll. i.e. one cannot scroll to the last item on the list, since the bottom part of the list is pushed below the view port.
My HTML & CSS (skeleton) is at http://jsfiddle.net/brjwjn2L/2/ where you can notice the scroll issue.
my HTML:
<div class="menu-wrap">
<div style="height:100px">
<div>my items</div>
</div>
<div class="menu">
<div class="icon-list">
<ul>
<li class="playerBox">
<div class="topRect">
item 1
</div>
</li>
<!-- unknown number of items -->
<li class="playerBox">
<div class="topRect">
item n
</div>
</li>
</ul>
</div>
</div>
</div>
I'd appreciate any hint as for how can the list scroll bar be shown so that user could scroll all the way to the last item.
Thanks
Idan

Answer 1

Is changing your .menu-wrap's CSS from
position: fixed;
to
position: relative;
an option? It does fix the scrolling problem, but it might change your layout.
You could also try
position: absolute;
though it doesn't seem to display correctly.
EDIT: Since that isn't an option, change the height style of your title div to percent say 15%:
<div style="height:15%">
<div>my items</div>
</div>
and then change your menu height to fill the REST of the percentage (not 100%):
.menu {
height: 85%;
overflow-y: auto;
}
The problem is that both the title div and the menu div have the same container parent. So since the title div was taking up 100px, that 100px was removed from the menu's 100%.