如何自动为我的div添加垂直滚动条？

Question

我想添加垂直滚动条到我的<Div>.我试过了overflow:auto,但它没有用.我在Firefox和Chrome中测试了我的代码.我在这里粘贴Div样式代码:

float:left;
width:1000px;
overflow: auto;

提前致谢.

Answer 1

您需要指定一些高度以使overflow: auto;属性工作.
出于测试目的,添加height: 100px;并检查.
而且如果你给它overflow-y:auto;而不是更好overflow: auto;,因为这会使元素只滚动而不是水平.

float:left;
width:1000px;
overflow-y: auto;
height: 100px;

如果您不知道容器的高度,并且想要在容器达到固定高度时显示垂直滚动条100px,请使用max-height而不是height属性.

有关更多信息,请阅读此MDN文章.

Answer 2

你必须添加max-height属性.

.ScrollStyle
{
    max-height: 150px;
    overflow-y: scroll;
}

<div class="ScrollStyle">
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
  Scrollbar Test!<br/>
</div>

Answer 3

你可以设置:

overflow-y: scroll;height: XX px

Answer 4

我有一个惊人的卷轴div-popup.要应用,请将此样式添加到div元素:

overflow-y: scroll;
height: XXXpx;

在height您指定将成为div的高度,一旦如果有内容超过这个高度,你必须滚动它.

谢谢.

Answer 5

我不太确定你尝试使用div的是什么,但这是一个带有一些随机文本的例子.

Mr_Green在他说添加时给出了正确的说明,overflow-y: auto因为这限制了它垂直滚动.这是一个JSFiddle示例:

的jsfiddle

Answer 6

要在div中显示垂直滚动条,您需要添加

height: 100px;   
overflow-y : scroll;

要么

height: 100px; 
overflow-y : auto;