Html 使 div 可滚动

Make div scrollable

提问by user3145373 ツ

I have a div that I am displaying many things in that are related to laptop for filtering data. The div increases it's size as the data size increases in it.

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

I want the div to remain at a max size of 450px then if data increases scroll will come automatically. The div size should not be increased.

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

jsfiddlefor it.

jsfiddle为它。

css :

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

Can anyone help me achieve this?

任何人都可以帮助我实现这一目标吗？

回答by Zword

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

使用overflow-y:auto用于当其含量超过设定高度的div自动显示滚动。

See this demo

看这个演示

回答by Manoj

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

使用overflow:auto属性，如果溢出被剪裁，则应添加滚动条以查看其余内容，并提及高度

DEMO

演示

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

回答by care7289

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

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

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-xproperty.

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

---

---

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

我还认为值得一提的是overflowstyle 属性值的差异，因为我看到有些人使用auto和其他人使用scroll：

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

可见= 溢出的内容不会被剪裁，并且会div比集合大height。

hidden= The overflowing content is clipped, and the rest of the content that is outside the set heightof the divwill be invisible

隐藏=溢出的内容被裁剪，并且内容的其余部分即该组外部height的div将是不可见

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

scroll= 溢出的内容被剪切，但添加了一个滚动条以查看集合height中的其余内容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 heightof the div

auto= 如果有溢出的内容，它会被剪裁并添加一个滚动条来查看集合height中的其余内容div

回答by Saurabh

You need to remove the

你需要删除

min-height:440px;

to

到

height:440px;

and then add

然后添加

overflow: auto;

property to the class of the required div

属性到所需 div 的类

回答by johnpili

Place this into your DIV style

将其放入您的 DIV 样式中

overflow:scroll;

回答by Manoj Sharma

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;

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

回答by Afnan Ahmad

You should add overflow property like following:

您应该添加如下溢出属性：

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