Как разрешить содержимое двух DIV бок о бок страницы прокручивать вниз или вверх независимо друг от друга без использования фреймов?

У меня есть страница, написанная в ASP classic, которая использует набор фреймов, содержащий 2 кадра. Пока левый кадр служит для отображения меню, правый кадр отображает содержимое страницы.

Как работает страница, пользователь может самостоятельно прокручивать вниз или вверх содержимое одного из фреймов.

Как я могу воспроизвести ту же функциональность, используя только HTML и CSS?

 
//main content here...

Спасибо за помощь

Вы можете сделать это с overflow: auto и фиксированная height на родительском элементе.

 body, html { margin: 0; padding: 0; } .content { height: 100vh; display: flex; } .left, .right { flex: 1; overflow: auto; } .inner { height: 1000px; } 
 
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.
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!

Дайте каждой фиксированной высоте, как 500px;

Затем установите для свойства overflow-y значение auto или прокрутите, чтобы включить панель прокрутки

overflow-y: auto;

вот рабочая скрипка:

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

Вы можете использовать NiceScroll ( jQuery Plugin ) для своей страницы. Вы можете применить его к объекту DIV, который вы хотите.

введите описание изображения здесь

Живой демонстрационный пример и образец кода.

Загрузить исходный код