帶有單獨滾動條的固定位置邊欄？

Question

我有一個簡單的CSS設置，但不知道如何去解決我的問題。

我在左側有一個固定的側邊欄，右側有一個內容窗格。

左側是用於右側的目錄，因此用戶可以輕鬆地跳到右側報告中的各個位置。

我希望側邊欄保持固定，因爲報告非常長（因此是TOC），並且如果它與主要內容一起滾動，則其相當不值錢，因爲它們總是必須滾動到頂部才能訪問它。

我遇到的問題是，在很多情況下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

發現，使用

overflow-y:scroll 

型修正在左側導航DIV需要。