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

Question

I want to place 2 fixed Sidebars and a middle Content div so when i scroll the Content is scrolling. I could work with overflow scroll but then i have the scrollbar in the middle div which is a bit ugly.

For a better understanding here a Concept:


So i already tried a bit but cant figured out a good stable solve.

Thanks for every help.

Answer 1

Based on what I understood, you are looking for something like this CODEPEN

So the two sidebars are 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 the scrollable one:

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

If you want the middle div to be fixed but the content inside of it move around, then you just need to add this to .scrollable :

overflow: scroll;

And you need to add this piece of jquery code as well to change the height of divs according to 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);
   });
});