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

谁能帮我实现这个目标？

原文由 user3145373 ツ 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 overflow-y:auto 用于在内容超过 div 设置高度时自动显示滚动。

看这个演示

原文由 Zword 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

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

此方法更适用于需要适应屏幕高度的流体布局，也适用于 overflow-x 属性。

---

我还认为值得一提的是 overflow 样式属性值的差异，因为我看到一些人使用 auto 和其他人使用 scroll :

visible = 溢出的内容未被剪裁，将使 div 大于集合 height 。

hidden = 溢出的内容被剪掉，剩下的在集合 height 之外的内容 div 将不可见

scroll = 溢出的内容被剪掉，但添加了一个滚动条以查看集合中的其余内容 height div

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

另请参阅 MDN 以获取更多信息和示例。

原文由 care7289 发布，翻译遵循 CC BY-SA 4.0 许可协议