Hello developers,
I’ve added footer to base.html, but the main body will show below the footer. Any sample I can follow?
Thanks a lot! AW
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.
Enter your email to get $200 in credit for your first 60 days with DigitalOcean.
New accounts only. By submitting your email you agree to our Privacy Policy.
Hey @massiveseagreenanemone,
There are many ways to position a footer on a web page, and the correct choice often depends on your specific needs. If you want your footer to always appear at the bottom of the page, even when there isn’t enough content to push it down naturally, you could use a “sticky” or “fixed” footer.
Here’s a simple example of how to create a sticky footer using Flexbox:
This CSS works by making the main content and the footer children of a flex container. By setting
min-height: 100vh;
on the container, it takes up at least the full height of the viewport.The
flex: 1;
on the main content allows it to expand to fill all the remaining space in the container, pushing the footer down to the bottom of the page. If the content is longer than the viewport, the page will be scrollable as usual and the footer will be at the bottom of the content.Hello @massiveseagreenanemone
You can share the HTML code here so we can check it together.
I’ll recommend making sure that the footer is located within the
<footer>
block and the main body in the<body>
. you should consider using appropriate CSS styling to properly position the footer at the bottom of the page.Hope that this helps!
I have moved the {% block content %} {% endblock %} before footer in base.html, and that’s work! Thank you all!