9

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;
}

1 Answer 1

14

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.