Question

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!

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.

KFSys

Site Moderator

• 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>
<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.

alexdo

Site Moderator

• 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!

MassiveSeaGreenAnemone • June 4, 2023

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!

Question

Footer shows on the top

Try DigitalOcean for free

Popular Topics

Get our biweekly newsletter

Hollie's Hub for Good

Become a contributor

Featured on Community

DigitalOcean Products

Welcome to the developer cloud