I am facing an issue with the footer on my website. When the list of items is empty, the footer extends all the way up to the navigation bar itself. I attempted to find a workaround, but as I am not a front-end developer, my efforts were unsuccessful.
I am using Bootstrap 4 and have a custom class called .page-footer.
Here is the CSS code:
.page-footer {
padding: 2.5rem 0;
color: #999;
text-align: center;
border-top: .05rem solid #e5e5e5;
}
And here is the HTML code:
{% block footer %}
<footer class="page-footer">
-- Code snippet truncated for brevity --
</footer>
{% endblock footer %}
The entire HTML page code can be seen below:
<!DOCTYPE html>
<html lang="en">
{% block header %}
<head>
<!-- Bootstrap core CSS -->
<link href="{% static 'vendor/bootstrap/css/bootstrap.min.css' %}" rel="stylesheet">
-- Code snippet truncated for brevity --
</html>