As you can see header always is fixed and has position: fixed, siderbar has property top: 6rem and also styles for scrolling, but content doesn't scroll fully. How I fix it without changing header styles? I would like to stay the same what you see when run this snippet but with correct scroll.
* {
margin: 0;
padding: 0;
}
.container {
position: relative;
height: 1000rem;
}
.header {
width: 100%;
background: #000;
display: flex;
font-size: 4rem;
color: #fff;
z-index: 2;
position: fixed;
top: 0;
}
.sidebar-title {
background: #999;
width: 100%;
}
.sidebar {
background: #f20;
width: 20%;
z-index: 1;
top: 6rem;
position: sticky;
height: 100%;
overflow-y: scroll;
max-height: 100vh;
}<div class="container">
<header class="header">header</header>
<div class="sidebar">
<div class="sidebar-title">SIDEBAR</div>
<ul>
<li>aaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbb</li>
<li>ccccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeee</li>
<li>fffffffffffffffffff</li>
<li>ggggggggggggg</li>
<li>hhhhhhhhhhh</li>
<li>iiiiiiiiiiiiiiiii</li>
<li>jjjjjjjjjjjjjj</li>
<li>kkkkkkkkkkk</li>
<li>llllllllllll</li>
<li>mmmmmmmmmmmmm</li>
<li>nnnnnnnnnnnnnnn</li>
<li>oooooooooooooo</li>
<li>pppppppppppp</li>
<li>qqqqqqqqqqqqqqq</li>
<li>rrrrrrrrrrrrrrr</li>
<li>ssssssssss</li>
<li>tttttttttttt</li>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul>
</div>
</div>Try this :
CSS
* {
margin: 0;
padding: 0;
}
.container {
}
.header {
width: 100%;
background: #000;
display: flex;
font-size: 4rem;
color: #fff;
z-index: 2;
top: 0;
position:sticky;
}
.sidebar-title {
background: #999;
width: 100%;
height:30px;
position:relative;
}
.sidebar {
background: #f20;
width: 20%;
z-index: 1;
top: 6rem;
position: static;
height: 100%;
overflow-y: auto;
max-height: 100vh;
}
HTML
<div class="container">
<header class="header">header</header>
<div class="sidebar">
<div class="sidebar-title">SIDEBAR</div>
<div> <ul>
<li>aaaaaaaaaaaaaaaa</li>
<li>bbbbbbbbbbbbbbbb</li>
<li>ccccccccccccccc</li>
<li>dddddddddddddd</li>
<li>eeeeeeeeeeeee</li>
<li>fffffffffffffffffff</li>
<li>ggggggggggggg</li>
<li>hhhhhhhhhhh</li>
<li>iiiiiiiiiiiiiiiii</li>
<li>jjjjjjjjjjjjjj</li>
<li>kkkkkkkkkkk</li>
<li>llllllllllll</li>
<li>mmmmmmmmmmmmm</li>
<li>nnnnnnnnnnnnnnn</li>
<li>oooooooooooooo</li>
<li>pppppppppppp</li>
<li>qqqqqqqqqqqqqqq</li>
<li>rrrrrrrrrrrrrrr</li>
<li>ssssssssss</li>
<li>tttttttttttt</li>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
<li>5555</li>
</ul></div>
</div>
</div>