这是我的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;}
我想获得纤薄的垂直滚动条。每个人似乎做同样的事情,但它不适合我。仅供参考我是从其他各个网站复制过来的,所以在某些地方我可能会出错。我希望有人能帮助我。
答案 0 :(得分:1)
overflow: hidden
正在停止显示视口以外的任何内容。因此,您不能低于100%滚动,因为没有低于100%。
html{
height: 100%;
overflow: hidden; /* Remove this */
}