I am currently working on a webpage layout that includes multiple columns, a header, and a footer. One of my requirements is to have a column scroll along with the user's navigation but not overlap the footer section:
<html>
<head></head>
<body>
<div id="wrap">
<div id="main" class="clear-top">
<div class="col-lg-12">
<div class="row pl-4 justify-content-between pb-4">
<div class="col-lg-1 col-md-12 col-sm-12 ">
</div>
<div class="col-lg-7 col-md-12 col-sm-12 ">
... Main Content ...
</div>
<div class="col-lg-4 col-md-12 col-sm-12 p-4 sidebar-container">
... Scrollable Content ...
</div>
</div>
</div>
</div>
</div>
</body>
<footer class="footer">
<div class="container">
</div>
</footer>
</html>
CSS:
// General Styling
html, body{
height: 100%;
}
#wrap {
min-height: 100%;
}
#main {
overflow:auto;
padding-bottom:150px; /* needs to be greater than footer height */
}
.footer {
position: relative;
margin-top: -150px; /* negative value equivalent to footer height */
height: 150px;
clear:both;
padding-top:20px;
width: 100%;
bottom: 0;
}
Despite using Bootstrap 4, I attempted adding the sticky-top class to the scrolling column but did not see any changes.
Trying to modify the position property to sticky for the column also did not produce the desired effect. Could it be that I added this property to the wrong div?