使 div 可滚动答案

【问题标题】：Make div scrollable使 div 可滚动
【发布时间】：2014-02-09 05:26:12
【问题描述】：

我有一个 div，其中显示了许多与笔记本电脑相关的内容，用于过滤数据。随着数据大小的增加，div 的大小也会增加。

我希望 div 保持在 450px 的最大大小，然后如果数据增加滚动将自动出现。不应增加 div 大小。

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

谁能帮我实现这个目标？

【问题讨论】：

设置一个固定的宽度，然后添加overflow-y:scroll到那个div:)
Making a div vertically scrollable using CSS的可能重复

标签： css html

【解决方案1】：

把它放到你的 DIV 样式中

overflow:scroll;

【讨论】：

【解决方案2】：

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

See this demo

【讨论】：

如果数据存在，我想在 div 的末尾放置按钮？该怎么办？
@user3145373 你能详细说说你想要什么吗
Sir data 列出了该 div 中的配置和末尾的过滤器按钮，所以我希望该 div 中是否有数据，但该按钮应始终位于 div 的底部。假设只有 2 个数据，例如 RAM 和处理器，所以按钮会非常向上，如果那里没有数据，我希望该按钮最后保留在 div 的底部。
如果我的问题得到了正确的回答，那么这可能会对您有所帮助jsfiddle.net/7w8TC/4。在这个小提琴中，我已经用 min-height 为 100 的 div 将不包括提交按钮的部分包装在了表单中%。因此，即使列表为空/或更少项目，容器也会将提交按钮推到底部
是的，这就是我想要的，谢谢。

【解决方案3】：

使用 css overflow:scroll; 属性。您需要指定高度和宽度，然后您将能够通过设置overflow-x:auto; 或overflow-y:auto; 水平和垂直滚动或两个滚动之一。

【讨论】：

【解决方案4】：

你需要删除

min-height:440px;

到

height:440px;

然后添加

overflow: auto;

所需 div 的类的属性

【讨论】：

如果数据存在，我想在 div 的末尾放置按钮？该怎么办？
@user3145373 你想要这个功能吗JSFiddle demo-----

【解决方案5】：

使用overflow:auto属性，如果溢出被剪裁，需要添加滚动条才能看到剩余的内容，并注明高度

DEMO

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

【讨论】：

【解决方案6】：

你应该像下面这样添加溢出属性：

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

【讨论】：

如果数据存在，我想在 div 的末尾放置按钮？该怎么办？
@user3145373 你可以在 div 的末尾放置按钮。你问如何放置按钮？或者您是否在询问如何检查您的数据是否存在于 div 中。你的问题不清楚。
是的，我说的是把按钮放在 div 的底部。
@user3145373 <button type="button" onclick="alert('Hello world!')">Click Me!</button> 。您可以将按钮放置在 div 中您想要的位置。
不不不，在小提琴中检查过滤器按钮是否存在，我想放在div的末尾是否存在列表数据。

【解决方案7】：

我知道这是一个较老的问题，最初的问题需要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：

可见 = 溢出的内容不被剪裁，会使div 大于设置的height。

隐藏 = 溢出的内容被剪掉，div 的集合height 之外的其余内容将不可见

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

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

有关更多信息和示例，另请参阅 MDN。

【讨论】：

是的，感谢您发布答案。感谢分享。
其实这是错误的。我将 div 设置为隐藏，它垂直延伸超出想象。事实上，我实际上需要它不要拉伸并给我一个垂直滚动条，但没有允许它的设置。 ppl 正在使用 java 和各种各样的东西来完成它。令人惊讶的是，如此简单的事情如此“难以”完成。我假设它与被包装的 div 和浏览器忽略某些设置有关