div scrollbar machen

Ich habe ein div, in dem ich viele Dinge anzeige, die sich auf Laptops zum Filtern von Daten beziehen. Das div erhöht seine Größe, wenn die Datengröße darin zunimmt.

Ich möchte, dass das div bei einer maximalen Größe von 450 Pixel bleibt, wenn die Daten dann zunehmen, wird automatisch gescrollt. Die div-Größe sollte nicht erhöht werden.

jsfiddle dafür.

CSS:

.itemconfiguration
{
    min-height:440px;
    width:215px;
    /* background-color:#CCC; */        
    float:left;
    position:relative;
    margin-left:-5px;
}

.left_contentlist
{
    width:215px;
    float:left;
    padding:0 0 0 5px;
    position:relative;
    float:left;
    border-right: 1px #f8f7f3 solid;
    /* background-image:url(images/bubble.png); */
    /* background-color: black; */
}

Kann mir jemand helfen, dies zu erreichen?

Verwenden overflow-y:auto zum automatischen Anzeigen von Scrollen, wenn der Inhalt die eingestellte divs-Höhe überschreitet.

Siehe diese Demo

verwenden overflow:auto Eigenschaft, Wenn der Überlauf abgeschnitten ist, sollte eine Bildlaufleiste hinzugefügt werden, um den Rest des Inhalts anzuzeigen, und erwähnen Sie die Höhe

DEMO

 .itemconfiguration
    {
        height: 440px;
        width: 215px;
        overflow: auto;
        float: left;
        position: relative;
        margin-left: -5px;
    }

Ich weiß, dass dies eine ältere Frage ist und dass die ursprüngliche Frage die benötigte div fest haben heightaber ich dachte, ich würde teilen, dass dies auch ohne ein festes Pixel erreicht werden kann height für diejenigen, die nach einer solchen Antwort suchen.

Was ich meine ist, dass Sie so etwas verwenden können:

.itemconfiguration
{
    // ...style rules...
    height: 25%; //or whatever percentage is needed
    overflow-y: scroll;
    // ...maybe more style rules...
}

Diese Methode eignet sich besser für flüssige Layouts, die sich an die Höhe des Bildschirms anpassen müssen, auf dem sie angezeigt werden, und funktioniert auch für die overflow-x Eigentum.

Ich dachte auch, es wäre erwähnenswert, die Unterschiede in den Werten für die overflow style-Eigenschaft, wie ich einige Leute gesehen habe auto und andere verwenden scroll:

sichtbar = Der überlaufende Inhalt wird nicht beschnitten und wird das machen div größer als der Satz height.

versteckt = Der überlaufende Inhalt wird abgeschnitten und der Rest des Inhalts, der sich außerhalb des Satzes befindet height des div wird unsichtbar sein

scrollen = Der überlaufende Inhalt wird abgeschnitten, aber es wird eine Bildlaufleiste hinzugefügt, um den Rest des Inhalts innerhalb des Satzes anzuzeigen height des div

Auto = Überlaufender Inhalt wird abgeschnitten und es sollte eine Bildlaufleiste hinzugefügt werden, um den Rest des Inhalts innerhalb des Satzes anzuzeigen height des div

Siehe auch auf MDN für weitere Informationen und Beispiele.

Sie müssen die entfernen

min-height:440px;

zu

height:440px;

und dann hinzufügen

overflow: auto;

Eigentum an der Klasse des erforderlichen div

Fügen Sie dies in Ihren DIV-Stil ein

overflow:scroll;

Sie sollten die Überlaufeigenschaft wie folgt hinzufügen:

.itemconfiguration
    {   
        height: 300px; 
        overflow-y:auto;
        width:215px;
        float:left;
        position:relative;
        margin-left:-5px;
    }

Verwenden Sie CSS overflow:scroll; Eigentum. Sie müssen Höhe und Breite angeben, dann können Sie horizontal und vertikal scrollen oder eine von zwei Scroll-Einstellungen vornehmen overflow-x:auto; oder overflow-y:auto;