I am currently working on a website that features a Bootstrap 4 navbar at the top, with the class "sticky-top". This navbar does not have a fixed height. Below the navbar, there is a container-fluid div containing a sidebar on the left and a main content div on the right. I want the sidebar to extend the full height of the page, from the bottom of the navbar to the bottom of the window, while remaining sticky as the user scrolls through the main content.
I have been experimenting with various CSS properties like "position: sticky", but have yet to find the correct combination to achieve the desired effect. Do you have any tips or suggestions for me?
Update:
Below is a snippet of my current custom.css file where I have been making adjustments:
.wrapper {
display: flex;
width:100%;
align-items: flex-start;
/* align-items: stretch;*/
}
#sidebar {
min-width:250px;
max-width:250px;
background-color: #f8f9fa;
position:sticky;
bottom:3rem;
align-self:flex-start;
}
Here is an excerpt of the HTML code related to the layout:
<nav class="navbar navbar-expand-lg navbar-light bg-light sticky-top">
<a class="navbar-brand mr-0 mr-md-2">Tuesday</a>
[more navbar items here]
<div class="container-fluid">
<div class="wrapper">
<div id="sidebar">
<br>
<div class="dropdown dd-custom">
<a href="#" class="dropdown-toggle di-custom" data-toggle="dropdown">Bills</a>
[more sidebar content]
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main text-mainframe main-custom">
[main content section]