javascript - two fixed responsive sidebars and a scrollable content div in the middle of responsive design -

i want place 2 fixed sidebars , middle content div when scroll content scrolling. work overflow scroll have scrollbar in middle div bit ugly.

for better understanding here concept:


tried bit cant figured out stable solve.

thanks every help.

based on understood, looking codepen

so 2 sidebars fixed:

.leftside {    position: fixed;    left: 10%;    top: 150px;    height: 300px;    width: 10%;    background: #ccc; } .rightside {    position: fixed;    right: 10%;    top: 150px;    height: 300px;    width: 10%;    background: #ccc; } 

for scrollable one:

.scrollable {   position: relative;   top: 10px;   height: 1000px;   width: 60%;   margin: 0 auto;   background: green; } 

if want middle div fixed content inside of move around, need add .scrollable:

overflow: scroll; 

and need add piece of jquery code change height of divs according window resize:

$(document).ready(function() {    $(".leftside, .rightside").height($(window).height()-100);    $(".scrollable").height($(window).height()-40);    $(window).resize(function() {        $(".leftside, .rightside").height($(window).height()-100);        $(".scrollable").height($(window).height()-40);    }); });