Looking to implement a sticky sidebar feature with a header and footer that remain visible while the middle content scrolls. The overall height of the page will vary, so I plan to use Bootstrap 5 grid for structuring.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="57515c5d565025535340550055404d">[email protected]</a>/dist/css/bootstrap.min.css">
<style>
body {
background-color: #f1f1f1;
margin: 15px 0;
}
header {
margin-bottom: 15px;
}
.block {
background-color: #fff;
border: 1px solid #ccc;
padding: 15px;
}
.sidebar .block {
width: 100%;
max-height: 100vh;
height: calc(100vh - 295px);
min-height: calc(100vh - 295px);
overflow-y: auto;
}
.sticky {
position: sticky;
top: 15px;
}
.header,
.footer {
height: 50px;
text-align: center;
color: #fff;
background-color: #000;
}
</style>
</head>
<body>
<div class="container-fluid">
<header>
<div class="block">
hi, my height can change.
</div><!--/.block -->
</header>
<div class="row">
<div class="col-sm-9">
<div class="block">
dd<br />dd<br />...all your content here...
</div><!--/.block -->
</div><!--/.col -->
<div class="col-sm-3">
<div class="sticky sidebar">
<div class="header">HEADER</div>
<div class="block">
...content of the sidebar...
</div><!--/.block -->
<div class="footer">FOOTER</div>
</div><!--/.wrapper -->
</div><!--/.col -->
</div><!--/.row -->
</div><!--/.container-fluid -->
</body>
</html>Check out this link on JSFiddle for reference.
To see how it looks in action, take a look at these previews: Preview when at the top of the page | Preview when at the bottom of the page