How to allow the content of 2 DIV side by side of a page to be scroll down or up independently without using frames?

问题

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

回答1:

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>

回答2:

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/

回答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

来源：https://stackoverflow.com/questions/35974458/how-to-allow-the-content-of-2-div-side-by-side-of-a-page-to-be-scroll-down-or-up