CSS滚动固定侧边栏

Question

我的设计中有一个固定的头部和侧边栏，在内容区域中可以滚动我有一个3列布局。

现在我希望内容区域中的2个侧边栏在有足够内容时滚动，但是当它在底部时，应该修复侧边栏，然后只滚动中间的内容。

这里是为了更好地理解高质量的概念

。

这可能没有JS，如果是的话怎么样？

感谢您的帮助:)

＆＃13;

＆＃13;

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;
  }

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

如果你从三个colomns中删除填充，为每个colomns添加一个子div，给它们一个100％的高度，一个overflow-x of scroll并给内容一个固定的位置，所有3个列都有一个高度100％并独立滚动。

    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;
  }