Issue
I have been trying to add a footer to my layout.html, which is inherited by other pages in my Django project.
I am looking to have a footer which is permanently at the bottom of any webpage like Stack Overflow does. I envisage this should be most efficiently done through inheritance.
My suggestion from layout.html is shown below:
HTML:
{% block body %}
{% endblock %}
<div class="test_footer">
Footer Test
</div>
CSS
.test_footer {
width: 100%;
background-color: var(--primary-colour);
padding: 20px;
box-sizing: border-box;
position: absolute;
bottom: 0;
}
The problem I have is that test_footer does not show beneath the rest of my body content. Instead it shows at the bottom of the browser covering html shown by the body and then moves up when I scroll.
Solution
The problem I have is that test_footer does not show beneath the rest of my body content. Instead it shows at the bottom of the browser covering html shown by the body and then moves up when I scroll.
position: absolute does that: Position Absolute and Bottom 0
If you place the footer after any other block that adds content, it will should just be at the bottom of the page without requiring any CSS.
For example, your base template could look something like this:
<body>
{% block body %}
{% block header %}{% endblock header %}
{% block content %}
{# all other templates override this block to put their content in here #}
{% endblock content %}
{% block footer %}
<footer class="test_footer">My Footer Stuff</footer>
{% endblock footer %}
{% endblock body %}
</body>
Answered By - CoffeeBasedLifeform
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.