html - CSS滚动固定侧边栏

Question

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

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

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

.

这在没有 JS 的情况下是否可行？如果可以，如何实现？

感谢您的帮助:)

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

如果你从你的三个列中删除填充，为每个列添加一个子 div 用于填充，给它们 100% 的高度，滚动的 overflow-x 并给内容一个固定的位置，所有 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;
  }