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?

Answer 1

Use overflow:auto it will do what you want

Answer 2

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

Answer 3

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

Answer 4

Try overflow-y:scroll ... that would do the trick!