垂直スクロールバーが

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 */ 
}