Div schuifbaar maken

Ik heb een div waarin ik veel dingen weergeef die met laptop te maken hebben voor het filteren van gegevens. De div wordt groter naarmate de gegevens groter worden.

Ik wil dat de div op een maximale grootte van 450px blijft, en als de gegevens toenemen, wordt automatisch scrollen weergegeven. De div-grootte mag niet worden vergroot.

jsfiddle ervoor.

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

Kan iemand me helpen dit te bereiken?

Antwoord 1, autoriteit 100%

Gebruik overflow-y:auto om automatisch scrollen weer te geven wanneer de inhoud de ingestelde divs-hoogte overschrijdt.

Bekijk deze demo

Antwoord 2, autoriteit 12%

gebruik overflow:auto eigenschap. Als overflow is afgekapt, moet een schuifbalk worden toegevoegd om de rest van de inhoud te zien, en de hoogte vermelden

DEMO

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

Antwoord 3, autoriteit 9%

Ik weet dat dit een oudere vraag is en dat de oorspronkelijke vraag de div nodig had om een ​​vaste height te hebben, maar ik dacht dat ik zou delen dat dit ook kan worden bereikt zonder een vaste pixel height voor wie op zoek is naar dat soort antwoord.

Wat ik bedoel is dat je zoiets kunt gebruiken als:

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

Deze methode werkt beter voor vloeiende lay-outs die moeten worden aangepast aan de hoogte van het scherm waarop ze worden bekeken en werkt ook voor de eigenschap overflow-x.

Ik dacht ook dat het de moeite waard zou zijn om de verschillen in de waarden voor de stijleigenschap overflow te vermelden, aangezien ik sommige mensen auto heb zien gebruiken en anderen scroll:

zichtbaar = De overlopende inhoud wordt niet afgekapt en maakt de div groter dan de ingestelde height.

verborgen = De overlopende inhoud wordt afgekapt en de rest van de inhoud die zich buiten de ingestelde height van de div bevindt, is onzichtbaar

scroll = De overlopende inhoud wordt afgekapt, maar er wordt een schuifbalk toegevoegd om de rest van de inhoud te zien binnen de ingestelde height van de div

auto = Als er overvolle inhoud is, wordt deze afgekapt en moet er een schuifbalk worden toegevoegd om de rest van de inhoud te zien binnen de ingestelde height van de div

Zie ook op MDN voor meer informatie en voorbeelden .

Antwoord 4, autoriteit 5%

U moet de

. verwijderen

min-height:440px;

naar

height:440px;

en voeg dan

. toe

overflow: auto;

eigenschap voor de klasse van de vereiste div

Antwoord 5, autoriteit 5%

Plaats dit in uw DIV-stijl

overflow:scroll;

Antwoord 6

U moet een overloopeigenschap als volgt toevoegen:

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

Antwoord 7

gebruik css overflow:scroll; eigenschap. je moet hoogte en breedte opgeven, dan kun je horizontaal en verticaal scrollen of een van de twee scrollen door overflow-x:auto; of overflow-y:auto;