Basically, the footer element is not different from div in terms of visual presentation. The footer does not come fixed to the bottom of a page or section by default – you need to configure it this way with CSS.
Maybe the element is positioned at the bottom of your other pages just because they have more content above, which naturally moves the footer down.
Because you have not provided any snippets about the styling of your page, I can only suggest you take a look at the several approaches to make the footer stick to the bottom of the page.
The footer from my homepage is behaving like a div – just after the content and not at the bottom of the page – only in my home page, i.e., at the store.html file. In all the other pages it behaves as expected. I’ve lost more time trying to solve this than I’d like to say… What am I missing?
footer.html
<footer>
<div class="container">Helga's</div>
</footer>
main.html
<head>
...
</head>
<body>
{% include 'store/navbar.html' %}
<div class="container">
<br>
{% block content %}
{% endblock content %}
</div>
{% include 'store/footer.html' %}
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"
integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous">
</script>
<script type="text/javascript" src="{% static 'js/cart.js' %}"></script>
</body>
store.html
{% extends 'store/main.html' %}
{% load static %}
{% block content %}
<div class="row h-50">
{% for product in products %}
<div class="col-lg-3">
<a href="#">
<img class="thumbnail" src="{{product.image_url}}">
</a>
<div class="box-element product">
<h6 style="text-align: center;"><strong>{{product.name}}</strong></h6>
<hr>
<button data-product={{product.id}} data-action="add"
class="btn btn-outline-secondary add-btn btn-sm update-cart">Buy</button>
<h4 style="float: right; font-size: 22;">R${{product.price|floatformat:2}}</h4>
</div>
</div>
{% endfor %}
</div>
{% endblock content %}
Actually the page where the footer is behaving like a div is the one with the most content. I’m using a footer provided in one of the bootstrap examples:
Can you explain a bit more what exactly do you mean that the footer is behaving like a div? And maybe a screenshot will be helpful as well.
Dimitar, thanks for your time! What I mean for “behaving like a div” is that the footer is positioned just after the content and not at the bottom of the page. You can see some screenshots here:
A big hint for you in those screenshots is the browser scrollbar. On the “Behaving properly” picture you have more scroll than on the other picture. The big white space between the login box and the footer is probably caused by some margin or padding. You can inspect it and you can also compare the HTML structure of the login box and the products section.
thanks for the insights. I just had time to look to this problem again and could solve it thanks to yours hints. I’m going to accept the answer.
