수직 스크롤 막대이 내 HTML 코드

Question

을 작동하지 않습니다 :

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