Nested scrollbar div

Question

I am trying to get the inner div to show the y axis scrollbar instead of the outer div.

In this example, the outer div has a scroll bar that includes a menu that I don't want.

http://jsfiddle.net/TKDqT/6/

CSS

div#container { overflow: auto; width: 90%; height: 65%; position: absolute; top: 100px; bottom: 0; left: 0; right: 0; margin: 0 auto -10px; padding: 10px; background-color: rgba(0,0,0,0.6); border:0px solid black; border-radius:15px; font-family: 'PT Sans', arial, serif; color:#ffffff; text-align:right; font-size:18px; } div#content { font-family: 'PT Sans', arial, serif; color:#ffffff; text-align:left; font-size:14px; } 

Answer 1

You must set overflow:auto to div#content not to div#container and indicate to one degree or another for div#content as height:95%

Here is the fiddle: http://jsfiddle.net/TKDqT/9/

Alternatively, you can also specify the height using jQuery or like this:

 $("div#content").outerHeight( $("div#container").innerHeight() - $("div#content").position().top); 

This will be more accurate than the percentage height.