I am working on creating a dashboard frame using Bootstrap 5, and I aim to achieve the functionality shown in these two images:
Here is my current setup:
<html>
<body>
<div class="pretoolbar">pretoolbar (non-essential information, hidden when scrolling)
</div>
<div class="sticky-toolbar"> sticky toolbar</div>
<div class="container-fluid">
<div class="sidebar col-3">
[content for tall sidebar]
</div>
<main class="col-9">
[also tall content]
</main>
</div>
<body>
</html>
CSS:
.pretoolbar{
background-color: #555;
color:white;
height:32px;
}
.sticky-toolbar{
background-color: black;
color:white;
height:56px;
position:sticky;
top:0;
}
.sidebar{
background-color: white;
position: sticky;
top: 56px;
overflow: hidden auto;
max-height: calc(100vh - 56px);
height: 100%;
}
I have tried various approaches, such as applying position: sticky to the main toolbar and sidebar. However, there is an issue with different vertical spaces causing the bottom part of the sidebar and its scrollbar to fall out of view. I have considered using flexbox, position:fixed, position:absolute, but none seem to solve the problem.
In addition, I noticed a strange behavior in Chrome when combining position:sticky inside position:fixed.
My objective is to find a solution without relying on JavaScript. Essentially, I need the sidebar's height to adjust based on the sticky state of the toolbar and search box. The top edge of the sidebar should behave like position:sticky, while the bottom edge should act like position:fixed;bottom:0).
Is there a way to accomplish this without JavaScript?