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!
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!
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:
<!DOCTYPE html>
<html>
<head>
<style>
.content-wrapper {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.content {
flex: 1;
}
.footer {
/* The footer will occupy as much space as it needs, and no more */
flex-shrink: 0;
}
</style>
</head>
<body>
<div class="content-wrapper">
<div class="content">
<!-- Your main content goes here -->
</div>
<footer class="footer">
<!-- Your footer content goes here -->
</footer>
</div>
</body>
</html>
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.
I have moved the {% block content %} {% endblock %} before footer in base.html, and that’s work! Thank you all!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.