별도의 스크롤 막대가있는 고정 위치 사이드 바?

Question

간단한 CSS 설정이 있지만 내 문제를 해결하는 방법을 잘 모릅니다.

왼쪽에는 고정 세로 막대가 있고 오른쪽에는 콘텐츠 창이 있습니다.

왼쪽은 오른쪽의 목차를위한 것이므로 사용자는 오른쪽 보고서의 여러 위치로 쉽게 이동할 수 있습니다.

보고서가 매우 길기 때문에 (즉 TOC) 사이드 콘텐츠가 고정 된 상태로 유지되기를 원합니다. 그리고 메인 콘텐츠로 스크롤하는 경우에는 항상 상단에 스크롤해야하므로 쓸모가 없습니다.

내가 겪고있는 문제는 대부분의 경우 목차가 너무 길어서 사이드 바 하단을 지나치므로 사이드 바에 내 메인 콘텐츠의 독립적 인 스크롤바가 있어야한다는 것입니다. 이것이 프레임에서 가능하다는 것을 알고 있지만, CSS로 어떻게 할 것인가?

<div style="width:100%;" class="wrapper"> 
     <div class="contentWrapper" style="width:100%;"> 
      <form id="FormData" runat="server" style="background-color:whitesmoke" > 
       <div id="leftnav" runat="server" class="left-nav" style="width:20%; float:left; position:fixed; height:100%; background-color:#0071c5; top: 0px; left: 0px;">  
        <div id="tableofcontents" runat="server"></div> 
       </div> 

       <div id="content" runat="server" class="content" style="width:80%; float:right;"> 

      </div> 
      </form> 
     </div> 
    </div> 

Answer 1

아래

코드 왼쪽 탐색 DIV에

overflow-y:scroll 

스타일의 수정을 사용하는 데 필요한, 그것을 발견.