CODEWITHSUNDEEP
htmlcss
Pharylon
Pharylon

Reputation: 9916

No Scroll on Div inside Another Div

How can I get scrolling to work on a div inside of another div?

Here's my sample code and here's a link to a fiddle showing the result:

EDIT: I know I can do scrolling on the outer div, but I don't want to (for instance, the title will scroll away then, and I'd like to keep it there).

<body style="background-color:gray">
    <div id="outerDiv" style="background:white;height:200px">
        <h4 class="sideTable">Outer Div</h4>
        <div id="innerDiv" syle="overflow: auto">
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
            Foo<br />
        </div>
    </div>
</body>

Upvotes: 0

Views: 2795

Answers (4)

Zword
Zword

Reputation: 6793

Add the following CSS:

1.

#outerDiv{
   overflow:auto; /* Displays scroll only when the contents exceed the containers width or height specified */
}

Demo

Also i corrected your html :

Which was - <div id="innerDiv" syle="overflow: auto"> X

To - <div id="innerDiv">

Other overflow options

2 overflow:scroll; // To always display Scroll

3 overflow:hidden; // to hide scroll

4 For only horizontal scroll use overflow-x and for only vertical scroll use overflow-y

Upvotes: 1

Pharylon
Pharylon

Reputation: 9916

The issue turns out to be scrolling only works if the outer div is set to a height of 100%. So if you don't want to do that, you need another, intervening div? There may be a better way, but this works for me (fiddle link):

<body style="background-color:gray">
    <div id="outerDiv">
        <h4 class="sideTable">Outer Div</h4>
        <div id="holdingDiv">
            <div id="innerDiv">
                Foo1<br />
                Bar1<br />
                Foo2<br />
                Bar2<br />
                Foo3<br />
                Bar3<br />
                Foo4<br />
                Bar4<br />
                Foo5<br />
                Bar5<br />
                Foo6<br />
                Bar6<br />
            </div>
        </div>
    </div>
</body>

And the CSS:

#outerDiv {
    background:white;
    height:200px;
    overflow:hidden;
}

#holdingDiv {
    height:100%;
}


#innerDiv {
    overflow:auto;
    height:100px
}

Upvotes: 1

Josh Crozier
Josh Crozier

Reputation: 240878

You were adding overflow:auto to the wrong element. Add it to the #outerDiv.

EXAMPLE HERE

#outerDiv {
    background:white;
    height:200px;
    overflow: auto;
}

Using a value of auto is your best option, as the scrollbar will only appear if the height doesn't fix the containing elements. Using scroll will always cause the scrollbar to appear regardless.

Upvotes: 2

justtal
justtal

Reputation: 800

http://jsfiddle.net/justtal/kQkd9/3/

just give to: outerDiv 

overflow-y: scroll

scroll will display the scroller even if there is no need.

You can do also "auto"

You also got a mistake:

in #innerDiv syle => style

Upvotes: 2

Related Questions