Alternative to "overflow:scroll;" to create a permanent vertical scrollbar in a div?

Question

I have a div in which I need a permanent vertical scrollbar. Sometimes the scrollbar will be needed because the div will contain excess content and other times it will not be needed but I want the appearance to be consistent - even when there is not excess content in the div I want it to contain a scrollbar. I tried this but it doesn't add a scrollbar when there is no excess content:

div#collection
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0 0 0 0;
    float: right;
    width: 200px;
    height: 100%;
    background: white;
    overflow:scroll;
}

I also tried increasing the height to 200% (html and body are set to 100%) but then the whole page scrolls - which is not what I want - I want the div alone to scroll while the rest of the page remains where it is.

Any suggestions?

Solution 1

Try to put a wrapper container within the div, and set it to height:101%.

Solution 2

Most newer browsers support CSS3's overflow-x and overflow-y:

div.verticalscroll {
    overflow: auto; /* For browsers that can't do overflow-y */
    overflow-y: scroll; /* Controls overflow on the y-axis */
}

See http://www.brunildo.org/test/Overflowxy2.html

Solution 3

Give the top container a height and an overflow-y: scroll, then have a sub container for the rest of the content that has a min-height set to be a couple pixels taller than the height of the container.

div#collection
{
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    border: 0 0 0 0;
    float: right;
    width: 200px;
    height: 400px;
    background: white;
    overflow:scroll;
}

div#sub {
    min-height: 402px;
}

<div id="collection">
    <div id="sub">
        Content goes here.
    </div>
</div>

Comments

[Ryan Florence]

auto only drops in a scroll bar if the content overflows. Sounds like he wants it there permanently.

[Moshe]

But th W3C validator won't unless you specifically tell it that you are using CSS3

[Ben Cottrell]

The validator is just a tool. Overflow-x and -y are in the spec and the browsers, so I can't see a problem with using them appropriately.

[James P.]

Never seen this fix before. Nice find :)