Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Nested div scrollbar

Tags:

html

css

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;
}
like image 947
kernelpanic Avatar asked Sep 06 '13 03:09

kernelpanic


1 Answers

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.

like image 62
ced-b Avatar answered Nov 22 '22 23:11

ced-b