I was aiming to position the footer at the bottom of the content, without extending it across the entire width of the page. The footer should always be aligned with the bottom if the content is not filling up the space, as illustrated in figure 1. The sidebar can be toggled using the button located in the navbar.
https://i.sstatic.net/eHudI.png
I managed to achieve the following layout:
https://i.sstatic.net/JeOcc.png
The sidebar should push the footer to the right, but it seems to always stay at the top. Ideally, when the sidebar is hidden or collapsed, the footer should expand to occupy the same width as the content.
The HTML structure for this implementation is as follows:
<div class="wrapper">
<!-- Navbar -->
<nav class="navbar navbar-expand-sm fixed-top navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container-fluid">
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar" class="shadow-sm"></div>
<!-- Page Content -->
<div id="content">
<div class="container-fluid">
<div class="card">
<div class="card-body">
<h1>
Collapsing Menu
<small class="text-muted">Version 2.1</small>
</h1>
</div>
</div>
</div>
</div>
</div>
<footer id="page-footer" class="py-3 bg-dark text-light">
<div class="container">
</div>
</footer>
The CSS styles for the footer and sidebar are as below:
footer {
bottom: 0;
left: 0;
position: fixed;
width: 100%;
}
#sidebar {
margin-top: 54px;
width: 250px;
position: fixed;
top: 0;
left: 0;
height: calc(100vh - 55px);
z-index: 999;
padding: 10px;
-webkit-transition: right .5s ease,left .5s ease;
-moz-transition: right .5s ease,left .5s ease;
-o-transition: right .5s ease,left .5s ease;
transition: right .5s ease,left .5s ease;
}