Cố định vị trí thanh bên với thanh cuộn riêng biệt?

Question

Tôi có một thiết lập CSS đơn giản nhưng không chắc chắn cách khắc phục sự cố của mình.

Tôi có thanh bên cố định ở bên trái và khung nội dung ở bên phải.

Phía bên trái dành cho một bảng nội dung cho phía bên phải, do đó người dùng có thể dễ dàng chuyển đến các vị trí khác nhau trong báo cáo ở bên phải.

Tôi muốn thanh bên phải cố định, vì báo cáo rất dài (do đó TOC) và nếu nó cuộn với nội dung chính thì nó khá vô giá trị vì chúng sẽ luôn phải cuộn lên trên cùng để truy cập.

Vấn đề tôi đang gặp phải là trong nhiều trường hợp, TOC quá dài và đang đi qua cuối thanh bên, vì vậy tôi cần phải có thanh bên của tôi có thanh cuộn độc lập từ nội dung chính của tôi. Tôi biết điều này là có thể với khung hình, nhưng làm thế nào để bạn đi về làm điều đó với CSS?

Mã dưới đây

<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

Tìm thấy nó, cần thiết để sử dụng sửa đổi phong cách

overflow-y:scroll 

trên div trái nav.