在我的代码中显示垂直滚动条

Question

我正在浏览HTML文档中的代码并遇到以下代码，其中插入了代码示例。这是我所指的代码。

 <div class="api-content-item" data-ng-show="verb.code != undefined">
    <h5>Code Samples:</h5>
    <ul class="example-lang">
      <li data-ng-repeat="ex in verb.code">
        <a data-ng-click="exampleCode(ex.uri, $parent.$index)">
          {{ex.lang}}
        </a>
      </li>
    </ul>
    <div class="document-clear"></div>
    <div hljs 
       data-line source="verb.examplecodedata" 
       class="doc-code-example" 
       data-ng-init="exampleCode(verb.code[0].uri, $index)"></div>
 </div>

问题在于，代码没有垂直滚动条而是水平滚动条。因此，例如，如果我在我的HTML文档上显示400行代码，那么它占用了大量空间并显示了我不想要的所有代码。

Angular JS中是否有任何东西我可以在上面的代码中包含垂直滚动条？请指教。感谢

当我使用以下CSS时：

.doc-code-example {
    overflow-x: scroll;
    /*max-height:60%;
    overflow-y:scroll;*/
    background: #fff;
    /*overflow: -moz-scrollbars-vertical;*/ 

}

滚动条方案如下所示：：

但是，当我使用以下CSS时，

.doc-code-example {
    /*overflow-x: scroll;*/
    max-height:60%;
    overflow-y:scroll;
    background: #fff;
    overflow: -moz-scrollbars-vertical; 

}

滚动条看起来像：创建了垂直展示，水平滚动条改变了它的颜色，但仍然存在。我想知道出了什么问题？

Answer 1

这是一个简单的CSS问题。

在您的班级.api-content项目中，设置最大高度，例如

 max-height:60%;

并设置您的overflow-y滚动

 overflow-y: scroll;
 overflow-x:hidden;

应该这样做。如果你在html而不是div中添加这些行，则垂直滚动将适用于所有地方而不仅仅适用于该特定div。

添加

 overflow: -moz-scrollbars-vertical; 

用于FF支持