I'm trying to get an inner div to show the y-axis scroll bar instead of the outer div.
In the example, the outer div is scrolling which includes the menu which 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;
}
You have to set the overflow:auto
on the div#content
not on div#container
and specify in one way or another a hight for the div#content
like height:95%
Here is a fiddle: http://jsfiddle.net/TKDqT/9/
Alternatively you could also specify the height with jQuery or so:
$("div#content").outerHeight( $("div#container").innerHeight() - $("div#content").position().top);
This would be more accurate than a percentage height.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With