垂直滚动条不起作用

时间:2017-02-09 16:07:59

标签: html css twitter-bootstrap frontend web-frontend

这是我的HTML代码:

<div id="section">

    <div class="row container-fluid" style="overflow: hidden;">
        <div class="col-md-2" style="background-color: red; top: 0; height: auto; overflow-y: auto; ">
            <ul>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
                <li>a</li><li>a</li><li>a</li><li>a</li>
            </ul>
        </div>
        <div class="col-md-10" style="background-color: green; top: 0; height: 400px; "></div>
    </div>
</div>

这是我的CSS代码:

* {
    margin: 0;
    padding: 0;
}

html{
    height: 100%;
    overflow: hidden;
}
body {
background-color: #F7F9F9 !important;

}

.navbar{
    background-color: #FDFEFE !important;
    padding: 0;
    margin: 0 !important;
}

.navbar-header{
    width: 100%;
    margin: 0;
    padding: 0;
}

#section .row{
    margin: 0 !important;
    padding: 0 !important;
    display: block;
}

.col-md-2{
    overflow-y: auto;
}

::-webkit-scrollbar {
  -webkit-appearance:none;
  width:12px;
  _background-color:#f0f0f0;
}

::-webkit-scrollbar-thumb {
  border-radius:12px;
  border:4px solid rgba(255,255,255,0);
  background-clip:content-box;
  _background-color:#bfbfbf;
  background-color: #A0A0A0;
}
::-webkit-scrollbar-thumb:hover {
    border-radius:12px;
    border:4px solid rgba(255,255,255,0);
    background-clip:content-box;
    background-color:#A0A0A0;}

::-webkit-scrollbar-corner {
    background-color:#e6e6e6;}

我想获得纤薄的垂直滚动条。每个人似乎做同样的事情,但它不适合我。仅供参考我是从其他各个网站复制过来的,所以在某些地方我可能会出错。我希望有人能帮助我。

1 个答案:

答案 0 :(得分:1)

overflow: hidden正在停止显示视口以外的任何内容。因此,您不能低于100%滚动,因为没有低于100%。

html{
    height: 100%;
    overflow: hidden; /* Remove this */
}