垂直滾動條不工作

Question

這是我的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;} 

我想獲得苗條的垂直滾動條。每個人似乎都做同樣的事情，但它不適合我。僅供參考，我從其他各種網站上覆制了這些內容，所以我可能在某些地方出錯了。我希望有人能幫助我。

Answer 1

overflow: hidden正在停止顯示視口之外的任何內容。因此，您不能低於100％滾動，因爲不低於100％。

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