131

我想在我的<div>. 我试过overflow: auto了，但它不起作用。我已经在 Firefox 和 Chrome 中测试了我的代码。

我在这里粘贴 div 样式代码：

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

6 回答 6

173

您需要指定一些高度才能使该overflow: auto;属性正常工作。
出于测试目的，添加height: 100px;并检查。 如果你给出而不是，
它会更好，因为这使得元素只能垂直滚动而不是水平滚动。overflow-y:auto;overflow: auto;

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

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

有关更多信息，请阅读此MDN 文章。

于 2013-08-12T09:19:45.717 回答
57

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

于 2014-10-30T07:10:57.763 回答
16

我的div-popup. 要应用，请将此样式添加到您的 div 元素：

overflow-y: scroll;
height: XXXpx;

您指定的height将是 div 的高度，一旦您的内容超过此高度，则必须滚动它。

谢谢你。

于 2014-11-26T08:13:17.577 回答
14

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

height: 100px;   
overflow-y : scroll;

或者

height: 100px; 
overflow-y : auto;
于 2014-09-18T18:02:29.763 回答
10

我不太确定您尝试使用 div 做什么，但这是一个带有一些随机文本的示例。

Mr_Green 在说添加时给出了正确的指示，overflow-y: auto因为这将其限制为垂直滚动。这是一个 JSFiddle 示例：

JSFiddle

于 2013-08-12T09:23:12.603 回答
4

从 OS X Lion 开始，网站上的滚动条默认是隐藏的，只有在您开始滚动时才可见。就个人而言，我更喜欢隐藏的滚动条，但如果你真的需要它，你可以覆盖默认值并强制 WebKit 浏览器中的滚动条返回，如下所示：

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}

于 2018-08-13T17:53:35.237 回答