Sidebar di posizione fissa con barra di scorrimento separata?

Question

Ho una semplice configurazione CSS ma non sono sicuro di come risolvere il problema.

Ho una barra laterale fissa sulla sinistra e un riquadro del contenuto sulla destra.

Il lato sinistro è per un indice per il lato destro, in modo che l'utente possa facilmente passare a varie posizioni all'interno del report sul lato destro.

Voglio che la barra laterale rimanga fissa, poiché il report è molto lungo (da qui il TOC) e se scorre con il contenuto principale è quindi abbastanza inutile in quanto dovrebbero sempre scorrere verso l'alto per accedervi.

Il problema che sto incontrando è che in molti casi il sommario è troppo lungo e passa oltre il fondo della barra laterale, quindi ho bisogno di avere la mia barra laterale ha una barra di scorrimento indipendente dal mio contenuto principale. So che questo è stato possibile con i frame, ma come si fa a farlo con i CSS?

codice qui sotto

<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

trovato, necessario per utilizzare il modificatore stile

overflow-y:scroll 

sul div di navigazione sinistra.