滚动条不起作用

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文件的内容已超出标准范围，但即使滚动条也无法操作。此外，我已将滚动条的颜色指定为红色，但是颜色效果似乎也不起作用。下面是浏览器的屏幕截图，

如何激活该滚动条？提前致谢。

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