Footer shows on the top

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

Submit an answer

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!

Sign In or Sign Up to Answer

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.

Site Moderator
Site Moderator badge
June 3, 2023

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:

<!DOCTYPE html>
            .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;
        <div class="content-wrapper">
            <div class="content">
                <!-- Your main content goes here -->
            <footer class="footer">
                <!-- Your footer content goes here -->

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.

Site Moderator
Site Moderator badge
June 3, 2023

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!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel