CSS scroling fixed sidebars - html

Question

I have in my design a fixed head and sidebar and in the content area which is able to scroll I have a 3 column layout.
Now I want the 2 sidebars in my content area scrolling when there is enough content but then when its at bottom then the sidebars should be fixed and only the content in the middle should then scroll.
Here for a better understanding a high quality concept
.
Is this possible without JS and if yes how ?
Thanks for every help :)
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
overflow-y: scroll;
padding-bottom: 10px;
}
.one {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100px;
float: left;
padding-top: 10px;
background:green;
}
.three {
width: 22%;
min-width: 150px;
min-height:100px;
float: left;
padding-top: 10px;
background:orange;
}
.clear {
clear:both;
}
<div class="header"></div>
<div class="sidebar"></div>
<div class="content">
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
<div class="clear"></div>
</div>

Answer 1

If you the remove padding from your three colomns, add a child div to each for padding, give them a height of 100%, an overflow-x of scroll and give content a fixed position, all 3 columns will have a height of 100% and scroll independently.
body {
background: #e1eae7;
}
.sidebar {
z-index: 100;
position: fixed;
height: 100%;
width: 150px;
background: rgba(47,160,178,1.0);
background-repeat: no-repeat;
background-position: bottom;
padding-top: 40px;
}
.header {
width: 100%;
top: 0px;
left 0px;
position: fixed;
background: #cf5c41;
background-repeat: repeat;
background-size: 38px 133px;
height: 40px;
background-position: 0px 39px;
box-shadow: 0px 1px 3px;
position: fixed;
z-index: 1000;
}
.content {
position: fixed;
top: 41px;
bottom: 0px;
left: 150px;
right: 0px;
height:100%;
max-height:100%;
min-height:100px;
}
.one {
width: 22%;
min-width: 150px;
float: left;
background:red;
}
.two {
width: 56%;
min-width: 400px;
min-height:100%;
float: left;
background:green;
}
.three {
width: 22%;
min-width: 150px;
float: left;
background:orange;
}
.column {
height:100%;
max-height:100%;
min-height:100px;
overflow-x: scroll;
}
.column .inner {
padding-top: 10px;
}
.clear {
clear:both;
}