Stały pasek boczny pozycji z oddzielnym paskiem przewijania?

Question

Mam prostą konfigurację CSS, ale nie jestem pewien, jak rozwiązać problem.

Mam stały pasek boczny po lewej stronie i okienko zawartości po prawej stronie.

Po lewej stronie znajduje się spis treści po prawej stronie, aby użytkownik mógł z łatwością przeskoczyć w różne miejsca w raporcie po prawej stronie.

Chcę, aby pasek boczny pozostał stały, ponieważ raport jest bardzo długi (stąd TOC) i jeśli przewija się z główną treścią, to jest dość bezwartościowy, ponieważ zawsze musiałby przewinąć do góry, aby uzyskać do niego dostęp.

Problem, który napotykam, polega na tym, że w wielu przypadkach spis treści jest zbyt długi i mija dolną część paska bocznego, więc muszę mieć pasek boczny z niezależnym paskiem przewijania z głównej zawartości. Wiem, że było to możliwe z ramkami, ale jak to zrobić z CSS?

kod poniżej

<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

Znaleziono go, potrzebne do korzystania z

overflow-y:scroll 

stylu modyfikatora na div lewej nav.