cssbootstrap 작은 화면의 접사 메뉴에 자동으로 스크롤 막대를 추가하는 방법은 무엇입니까?

Question

내 사이트에서 CSS 부트 스트랩 affix plugin을 끈적 메뉴로 사용하고 있습니다.

데스크톱에 문제가없는 메뉴 항목이 많습니다. 그러나, 작은 랩톱에서 내 사이트를 볼 때 내 메뉴의 하단 절반이 잘립니다.

화면이 작을 때 자동 스크롤 막대를 메뉴에 추가해야합니다.

여기 내 HTML 코드

<div class="container"> 
    <div class="row"> 

     <nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column"> 

      <ul class="nav nav-pills nav-stacked scrollspy affix-menu" id="docs-menu" data-spy="affix"> 

       <li> 
        <strong>Code Generator</strong> 
        <ul class="nav"> 
        <li><a href="#introduction">Introduction</a></li> 
        <li><a href="#features">Features</a></li> 
        <li><a href="#dependencies">Dependencies</a></li> 
        </ul> 
       </li> 

       <li> 
        <strong>Getting Started</strong> 
        <ul class="nav"> 
        <li><a href="#installation">Installation</a></li> 
        <li><a href="#features">Features</a></li> 
        <li><a href="#available-commands">Available Command</a></li> 
        </ul> 
       </li> 

       <li> 
        <strong>How To</strong> 
        <ul class="nav"> 
        <li><a href="#how-to-create-views-layout">How to create a "views-layout"</a></li> 
        <li><a href="#how-to-create-resource">How to create a resource</a></li> 
        <li><a href="#how-to-create-controller">How to create a controller</a></li> 
        <li><a href="#how-to-create-model">How to create a model</a></li> 
        <li><a href="#how-to-create-routes">How to create routes</a></li> 
        <li><a href="#how-to-create-views">How to create all standard CRUD views</a></li> 
        <li><a href="#how-to-create-create-view">How to create a "create-view"</a></li> 
        <li><a href="#how-to-create-edit-view">How to create a "edit-view"</a></li> 
        <li><a href="#how-to-create-index-view">How to create a "index-view"</a></li> 
        <li><a href="#how-to-create-show-view">How to create a "show-view"</a></li> 
        <li><a href="#how-to-create-form-view">How to create a "form-view"</a></li> 
        <li><a href="#how-to-create-migration">How to create a database migration</a></li> 
        <li><a href="#how-to-create-form-request">How to create form-request</a></li> 
        <li><a href="#how-to-create-language">How to create a language file</a></li> 
        </ul> 
       </li> 

       <li> 
        <strong>Fields</strong> 
        <ul class="nav"> 
        <li><a href="#model-fields-overview">Overview</a></li> 
        <li><a href="#model-fields-json">Creating fields from JSON file</a></li> 
        <li><a href="#model-fields-raw">Creating fields from a raw string</a></li> 
        </ul> 
       </li> 

      </ul> 

     </nav> 


     <div class="col-md-9 large-padding-sections" id="docs-main-column"> 

      //Sections goes here..... 
     </div> 

    </div> 
</div> 

나는 <nav class="col-sm-3 scrollspy hidden-xs hidden-sm" id="docs-menu-column"-style="overflow-y: auto !important;"를 추가하는 시도했지만 문제가 해결되지 않은 것입니다.

화면이 전체 접사 메뉴를 표시 할만큼 충분히 높지 않으면 왼쪽의 nav에 수직으로 스크롤 막대를 올바르게 추가하려면 어떻게해야합니까?

Answer 1

나는 문제는 그것이 스크롤 지시문을 주더라도 높이 제한이 없다는 것입니다. 시도해보십시오.

height: 100vh; 
overflow-y: scroll;