2013-08-12 107 views
60

我想向我的<Div>添加垂直滚动条。我试过overflow:auto,但它不工作。我已经在Firefox和Chrome中测试了我的代码。 我在这里粘贴div样式代码:提前如何自动添加垂直滚动条到我的div?

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

感谢。

+0

一个的jsfiddle或更多的CSS与您的标记 –

+6

试试这个:'溢出-Y:scroll'有些** **高度。浏览这个[** docs **](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow)。 –

+0

感谢Mr_Green的回复。但是这个代码不适合我。 – jay

回答

91

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

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

如果你不知道该容器的高度,要显示垂直滚动条,当容器达到一定的高度说100px,使用max-height代替height财产。请参阅MDN article

+0

是的,我得到了你的观点和测试,它在Chrome中工作正常,但不在FireFox中。另一个令人困惑的事情是垂直滚动条出现在FF中的页面加载时间,但在页面加载完成时消失! – jay

+0

“你需要指定一些高度”正是我的问题,谢谢! :P – wdanda

6

我不太清楚你在尝试使用div,但这是一些随机文本的例子。

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

JSFiddle

+0

首先@Mr_Green你的建议在Chrome中工作正常,但不在FF中。是否有添加高度的其他选择,因为我无法在我的设计结构中为我的Div添加高度。 – jay

4

要显示在您的div垂直滚动条你需要添加

height: 100px; 
overflow-y : scroll; 

height: 100px; 
overflow-y : auto; 
24

您必须添加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>

7

我在我的div-popup得到了一个惊人的滚轮。要申请,这种风格添加到您的div元素:

overflow-y: scroll; 
height: XXXpx; 

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

谢谢。

7

您可以设置:

overflow-y: scroll;height: XX px 
+1

这是以前的答案。 – UmNyobe