使div可滚动

Question

我有一个div,我正在显示许多与笔记本电脑相关的过滤数据.随着数据大小的增加,div增加了它的大小.

我希望div保持最大450px的大小然后如果数据增加滚动将自动进行.div大小不应该增加.

jsfiddle为它.

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

谁能帮我实现这个目标？

Answer 1

使用overflow-y:auto的时候自动含量超过的div设置高度显示滚动.

看这个演示

Answer 2

使用overflow:auto属性,如果剪切了溢出,则应添加滚动条以查看其余内容,并提及高度

DEMO

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

Answer 3

将其放入您的 DIV 样式中

overflow:scroll;

Answer 4

你需要删除

min-height:440px;

到

height:440px;

然后添加

overflow: auto;

属性到所需 div 的类

Answer 5

我知道这是一个比较老的问题，并且原始问题需要div有一个固定的height，但是我想与大家分享，height对于那些寻求这种答案的人来说，也可以在没有固定像素的情况下完成。

我的意思是，您可以使用类似：

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

此方法对于需要适应正在查看的屏幕高度的流体布局效果更好，并且也适用于该overflow-x属性。

我还认为值得一提的是overflowstyle属性值的差异，因为我看到有些人在使用，auto而其他人在使用scroll：

visible =溢出的内容不会被裁剪，并且会div大于设置的内容height。

hidden =裁剪了溢出的内容，并且超出了set height范围的其余内容div将不可见

滚动 =溢出的内容被裁剪，但添加了滚动条以查看集合内的内容的其余部分height的div

auto =如果有溢出的内容，则将其裁剪，并应添加滚动条以查看该组内容中的其余内容height。div