如何在不使用框架的情况下，允许页面上2 DIV的内容独立向下或向上滚动？

Question

I have an page written in ASP classic that uses frameset containing 2 frames. While the left frame serve to display the menu, the right frame display the page content.

The way the page works, user can independently scroll down or up content of either one of the frames.

How can I reproduce the same functionality using only HTML and CSS?

<div id="menu-container">
  //menu goes here...
</div>
<div id="main-content">
  //main content here...
</div>

Thanks for helping

Answer 1

Give each a fixed height like 500px;

Then set the overflow-y property to auto or scroll to enable the scrollbar

overflow-y: auto;

here is a working fiddle:

https://jsfiddle.net/pablo_tavarez/dobza7gv/1/

Answer 2

You can do this with overflow: auto and fixed height on parent element.

 body, html { margin: 0; padding: 0; } .content { height: 100vh; display: flex; } .left, .right { flex: 1; overflow: auto; } .inner { height: 1000px; } 

 <div class="content"> <div class="left"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi asperiores deleniti culpa voluptatem in esse magnam sequi laborum quas ipsum vel, dolores natus ad reprehenderit enim nihil tenetur eaque, modi.</div> </div> <div class="right"> <div class="inner">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex repellat architecto ducimus hic. Ratione eius eos, atque, officia nemo quasi beatae voluptatem necessitatibus hic nam aliquid iusto quis laudantium reiciendis!</div> </div> </div> 

Answer 3

You can use NiceScroll ( jQuery Plugin ) for your page. You can apply it to a DIV object you want.

Live demo and sample code.

Download open source code