滚动条无法工作

Question

以下是我的 HTML 文件，

<div class="col-xs-6 col-sm-3 my1" id="qwer1" role="navigation">        <!--Change is made here-->
          <div class="menuBar">
            <ul class="menuList" id="menuList">
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <li><a href="#">Update 1</a></li>
              <hr>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
              <li><a href="#">Chat 1</a></li>
            </ul>
          </div><!--/.well -->
        </div><!--/span-->

以下是CSS文件，

.my1
{
    position:fixed;
    left:78%;
    border-left:1px solid black;
    border-bottom:1px solid black;
    width:20%;
    top:14%;
    height:auto;
    overflow:scroll;
    scroll-face-color:red;
}

HTML文件的内容已经超出了屏幕，但是即使滚动条也无法操作。此外，我已经将滚动条的颜色指定为红色，但颜色效果似乎也没有生效。下面是浏览器的截图：

如何激活此滚动条？ 提前感谢。

- Saumil

Answer 1

问题在于你指定了以下内容：

height:auto;

在.my1规则下，div将根据需要扩展高度以容纳内容。

如果您固定了高度，将会激活滚动条。

请参见演示：http://jsfiddle.net/audetwebdesign/myPZB/ 至于尝试样式化滚动条颜色，感兴趣的属性是：

scrollbar-face-color

我认为目前这只支持IE浏览器。

参考：http://msdn.microsoft.com/en-us/library/ie/ms531157%28v=vs.85%29.aspx

- Marc Audet

---

谢谢Marc，当我将高度指定为500px时，滚动条起作用了，但是我仍然无法得到“红色”的颜色。对此有什么建议吗？ - Saumil

Answer 2

height:50%

尝试这个... 我测试过了，如果是 "自动"，滚动功能不起作用。

- lynndragon

Answer 3

如果您的HTML中包含以下元标记，则可以解决此问题：

<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

此外，请确保删除 height auto。

- Utkarsh verma