내비게이션 막대 내에서 스크롤

Question

예 (JSFiddle Example)입니다. 브라우저의 화면 크기만큼 잘린 경우 탐색 바의 내용을 스크롤 할 수 있기를 원합니다. 현재 문제는 Normal Size과 Small Size을 참조하십시오.

화면 크기가 > 768px 인 경우 화면의 왼쪽 부분 (250px)이 탐색 모음 (또는 상위)으로 덮여 있어야합니다.

지금까지 만족스러운 결과를 얻지 못했습니다. 따라서 도움을 요청하고 있습니다!

미리 감사드립니다.

CSS

@media (min-width: 768px) 
{ 
    .sidebar-main.expanded { 
     width: 250px; 
    } 

    .sidebar-main { 
     position: fixed; 
     height: 100%; 
    } 

    .sidebar-main .navbar { 
     height: 100%; 
    } 

    .sidebar-main .navbar .open .dropdown-menu { 
     position: static; 
     float: none; 
     width: auto; 
     margin-top: 0; 
     background-color: transparent; 
     border: 0; 
     box-shadow: none; 
    } 

    .sidebar-main .navbar-header { 
     float: none !important; 
    } 

    .sidebar-main .navbar-collapse { 
     padding: 0px; 
     max-height: none; 
    } 

    .sidebar-main ul { 
     float: none; 
     &: not { 
      display: block; 
     } 
    } 

    .sidebar-main li { 
     float: none; 
     display: block; 
    } 
} 

Answer 1

, 자바 스크립트의 특정 PX 값을 수동으로 높이를 설정하여이 문제를 해결했습니다 워킹 내가이 문제를 방지하고 싶어하지만, 그것은 유일한 솔루션으로 날 것으로 보인다.

Answer 2

는 overflow-y: auto-nav 요소를 추가하는 시도? 그것은 나를 위해 작동합니다.

nav { 
    overflow-y: auto; 
} 

는 fiddle