Alternative zu "Überlauf: scroll;" eine permanente vertikale Bildlaufleiste in einem div erstellen?

Question

Ich habe ein Div, in dem ich eine permanente vertikale Bildlaufleiste benötigen. Manchmal wird die Bildlaufleiste benötigt, weil das div überschüssigen Inhalt enthält und andere Male nicht benötigt wird, aber ich möchte, dass die Darstellung konsistent ist - selbst wenn es keinen übermäßigen Inhalt im div gibt, soll es eine Bildlaufleiste enthalten. Ich habe versucht, dies aber nicht eine Scrollbar hinzufügen, wenn kein Überschuss Inhalt ist:

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

Ich habe auch versucht, die Höhe auf 200% zu erhöhen (HTML und Körper werden auf 100% gesetzt), aber dann die ganze Seite scrollt - was ich nicht will - ich möchte, dass das div alleine scrollt, während der Rest der Seite dort bleibt, wo es ist.

Irgendwelche Vorschläge?

Answer 1

Versuchen wollen einen Wrapper Behälter innerhalb des div zu setzen, und setzen Sie ihn auf Höhe: 101%.

Answer 2

Verwenden overflow:auto es wird tun, was Sie

Answer 3

Die meisten neueren Browsern unterstützt CSS3 des Überlauf-x und Überlauf-y:

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

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

Answer 4

Try Überlauf-y Siehe: blättern ..., die den Trick tun würde!

Answer 5

Geben Sie dem oberen Container eine Höhe und einen Überlauf-y: Bildlauf, dann einen Untercontainer für den Rest des Inhalts mit einer Mindesthöhe, die um einige Pixel höher als die Höhe des Containers ist.

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> 

Answer 6

overflow: -moz-scrollbars-vertical; 
overflow-y: scroll; 

das Sie können