In my Django project, I am using Bootstrap 4.5 and I need the footer to be in one of two positions:
1- At the bottom of the content if the content is larger than the view height
2- At the bottom of the viewport if the content is smaller than the view height
It should look like this:
https://i.sstatic.net/w32kG.png
Here is what I have attempted so far based on similar questions found on Stack Overflow,
In base.html:
<style>
#page-container {
position: relative;
}
#content-wrap {
padding-bottom: 2.5rem; /* Footer height */
}
#footer {
position: absolute;
bottom: 0 !important;
width: 100%;
}
</style>
<body style="position:relative;">
<div id="page-container">
<div id="content-wrap">
<!-- all other page content -->
{% include 'partials/_navbar.html' %}
<div >
{% block content %} {% endblock %}
</div>
</div>
{% include 'partials/_footer.html' %}
</div>
</body>
In _footer.html
<footer class="page-footer font-small blue-grey lighten-5 mt-auto" id="footer" >
....
</footer>
However, the result is either as shown in the first image (left) or it sticks to the bottom of the page regardless of content height.