I'm currently working on a layout that involves organizing elements into 3 columns using Bootstrap 4.5.
The center column will contain a lengthy body of text.
Within the right column, there are two divs, one of which should be fixed either to the top or bottom. However, I am facing challenges getting the bottom element to remain fixed as desired due to auto-expansion. It's particularly tricky when it needs to expand from the bottom.
At the top of this right column, I am utilizing Tocify for my Table of Contents (ToC).
In the left column, there are several divs. The first div is a banner that I want to stay fixed at the top. The other divs are less crucial. In cases where the viewport size causes overflow in this column, I require an independent scrollbar specifically for the left column. Ultimately, I aim to have two separate and independent scrollbars - one for the webpage and another for the left panel.
To see an example with a long body showcasing the issue, you can check out this loaded fiddle using Bootstrap here: https://jsfiddle.net/x1nhrwtf/5/
<body>
<div class="container-fluid">
<main class="container py-3">
<div class="row">
<aside class="col-md-2">
<div class="row banner sticky-top bg-white p-3">
This will serve as a banner that remains fixed at the top.
</div>
<div class="scrollable-area hide-this-on-small-devices">
<div class="row bg-white p-3">
This column should not scroll alongside the middle section unless its contents overflow, in which case, I need a distinct scrollbar.
<hr />
</div>
<div class="row bg-white p-3">
This area will house a search bar. Hidden on small devices.
</div>
<div class="row bg-white p-3">
These divs will display announcements. Hidden on small devices.
</div>
<div class="row bg-white p-3">
Here we showcase BuiltWith information. Also hidden on small devices.
</div>
</div>
</aside>
<section class="content col-md-6">
Lorem ipsum dolor sit amet...
</section>
<aside class="col-md-4">
<div class="toc sticky-top bg-white p-3">
<h3>Table of Contents Section, sticky</h3>
<hr />
This section should remain positioned correctly. Even on small devices, it must stay at the top. The height of this element expands automatically to 60%.
A Tocify-style Table of Contents:
<div id="toc" class="pl-1"></div>
</div>
<div class="comments sticky-bottom bg-white p-3">
<h3>Comment Section</h3>
<hr />
This portion should stick to the bottom of the column and page. Its height also expands automatically but to 40%.
</div>
</aside>
</div>
</main>
<footer class="footer">Here is a footer. It should always be stuck along the bottom. Why does it seem missing?</footer>
</div>
</body>
CSS Attempt:
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.toc {
max-height: 60%;
}
.comments {
max-height: 40%;
}
.scrollable-area {
overflow-y: auto;
}