使div可滚动

时间:2014-01-20 06:10:06

标签: css html

我有一个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; */
}

任何人都可以帮助我实现这个目标吗?

7 个答案:

答案 0 :(得分:35)

当内容超出div设置的高度时,使用overflow-y:auto自动显示滚动。

See this demo

答案 1 :(得分:7)

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

<强> DEMO

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

答案 2 :(得分:4)

将其放入您的DIV风格

溢出:滚动;

答案 3 :(得分:4)

我知道这是一个较旧的问题,原始问题需要div有一个固定的height,但我想我会分享,这也可以在没有固定像素的情况下完成{{ 1}}对于那些寻找那种答案的人。

我的意思是你可以使用类似的东西:

height

此方法更适用于需要适应正在查看的屏幕高度的流体布局,并且适用于.itemconfiguration { // ...style rules... height: 25%; //or whatever percentage is needed overflow-y: scroll; // ...maybe more style rules... } 属性。

我还认为值得一提的是overflow-x样式属性值的差异,因为我看到有些人使用overflow而其他人使用auto

可见 =溢出的内容未被裁剪,会使scroll大于集合div

隐藏 =剪辑了溢出的内容,height的集合height之外的其他内容将不可见

滚动 =剪辑了溢出的内容,但添加了一个滚动条,以查看div height中的其余内容>

自动 =如果内容溢出,则会对其进行裁剪,并添加滚动条以查看div的{​​{1}}集内的其余内容}

答案 4 :(得分:3)

您需要删除

min-height:440px;

height:440px;

然后添加

overflow: auto;

属性到所需div的类

答案 5 :(得分:1)

使用css overflow:scroll;属性。你需要指定高度和宽度然后你可以水平和垂直滚动或两个滚动之一通过设置overflow-x:auto;或者溢出-y:auto;

答案 6 :(得分:1)

您应该添加溢出属性,如下所示:

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