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

あなたの場合、あなたの3 colomnsから削除パディングは、パディングにそれぞれに子div要素を追加し、それらに100％の高さを与え、スクロールのオーバーフロー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; 
    }