使div可滚动

10 浏览
0 Comments

使div可滚动

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

有人可以帮我实现这个吗？

0

3 答案

0 Comments

问题：如何使一个div具有滚动功能？

原因：原问题中需要div有一个固定像素高度，但是有些人希望不使用固定像素高度来实现这个功能。

解决方法：可以使用以下代码来实现：

.itemconfiguration
{
    // ...样式规则...
    height: 25%; //或者其他所需的百分比
    overflow-y: scroll;
    // ...可能还有其他样式规则...
}

另外，overflow样式属性的不同取值也是需要注意的：

visible = 溢出的内容不被裁剪，并且会使div变得比设置的高度更高。

hidden = 溢出的内容被裁剪，而超出div设置的高度的部分内容将不可见。

scroll = 溢出的内容被裁剪，但是会添加一个滚动条来查看div设置的高度内的其余内容。

auto = 如果有溢出的内容，它将被裁剪，并且应该添加一个滚动条来查看div设置的高度内的其余内容。

参考链接：https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

另外，原问题提到了一些人使用Java和其他方法来实现这个功能，可能与div被包裹以及浏览器忽略某些设置有关。

0
0 Comments

问题出现的原因：在一个div容器中，当内容超出容器的高度时，内容默认会被裁剪，无法显示超出容器高度的部分。

解决方法：使用CSS的overflow属性，将其设置为auto。这样，当内容超出容器的高度时，会自动添加滚动条，以便查看剩余的内容。同时，还需要注意设置容器的高度。

代码示例：

以上是解决问题的方法，你可以在下面的链接中查看一个示例DEMO：

[DEMO](http://jsfiddle.net/manojmcet/5Ekdu/)

0
0 Comments

在这个问题中，问题的出现原因是作者想要在div中放置一个按钮，并且无论数据是否存在，都希望按钮始终在div的底部。作者提到，如果div中只有两个数据，如RAM和processor，按钮会出现在很上方，作者希望无论是否有数据，按钮都能保持在div的底部。

解决方法是使用CSS属性overflow-y:auto，当内容超过div设置的高度时，会自动显示滚动条。还有一个示例链接，展示了如何使用min-height:100%来将按钮推到div的底部，即使列表为空或者只有少量项目。

原文链接：jsfiddle.net/7w8TC/4

0