Como puede ver, el encabezado siempre es fijo y tiene una posición: fija, la barra lateral tiene la propiedad top: 6rem y también estilos para desplazarse, pero el contenido no se desplaza por completo. ¿Cómo lo soluciono sin cambiar los estilos de encabezado? Me gustaría mantener lo mismo que ve cuando ejecuta este fragmento pero con el desplazamiento correcto.
* { 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>Prueba esto :
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>