让 div 可滚动

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

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

Jsfiddle for it.

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

有人能帮我吗?

202146 次浏览

Place this into your DIV style

overflow:scroll;

Use overflow-y:auto for displaying scroll automatically when the content exceeds the divs set height.

See this demo

use css overflow:scroll; property. you need to specify height and width then you will be able to scroll horizontally and vertically or either one of two scroll by setting overflow-x:auto; or overflow-y:auto;

You need to remove the

min-height:440px;

to

height:440px;

and then add

overflow: auto;

property to the class of the required div

use overflow:auto property, If overflow is clipped, a scroll-bar should be added to see the rest of the content,and mention the height

DEMO

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

You should add overflow property like following:

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

I know this is an older question and that the original question needed the div to have a fixed height, but I thought I would share that this can also be accomplished without a fixed pixel height for those looking for that kind of answer.

What I mean is that you can use something like:

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

This method works better for fluid layouts that need to adapt to the height of the screen they are being viewed on and also works for the overflow-x property.


I also thought it would be worth mentioning the differences in the values for the overflow style property as I've seen some people using auto and others using scroll:

visible = The overflowing content is not clipped and will make the div larger than the set height.

hidden = The overflowing content is clipped, and the rest of the content that is outside the set height of the div will be invisible

scroll = The overflowing content is clipped, but a scroll-bar is added to see the rest of the content within the set height of the div

auto = If there is overflowing content, it is clipped and a scroll-bar should be added to see the rest of the content within the set height of the div

See also on MDN for more information and examples.

To further clarify, you can use overflow: scroll or overflow: auto. They'll both work!

"The auto value is similar to scroll, but it adds scrollbars only when necessary" (source)

You can also further specify which direction you want to control overflow in, and which direction you want the scrollbar to appear by doing overflow-y: scroll (top/bottom) or overflow-x: scroll (left/right). If you use the generic overflow property, it will overflow in both x and y directions if needed.

"You can use the overflow property when you want better control of the layout. The overflow property specifies what happens if content overflows an element's box." (source)