In Oxygen Facebook group a user asks:

I am trying to create a template with footer always at the bottom of the page irrespective of browser resolution or device.

I made the footer have an absolute positioning but this does not seem to work when previewed with a content container with small content, The footer does not stay at the bottom but floats in the middle of the page just below the content container.

Thanks

This can be set up easily by setting 100% height to html and body, declaring the container element that has site header, inner content and site footer as a flex entity and adding a top margin of auto to the footer element.

Before:

After:

Step 1

Add a class of say, site-footer to your footer section.

Step 2

Add the following CSS code either in a Code Block element for your sitewide template or at Manage > Stylesheets:

html,
body {
    height: 100%;
}

body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

.site-footer {
    margin-top: auto;
}

Note: For some reason, this does not work i.e., the footer does not appear pushed down to the bottom in the Oxygen editor. But should work on the frontend.

Need help implementing a tutorial in your site or want to hire me for custom work?

HIRE ME

Find the article helpful and wish to donate?

DONATE

Comments

For adding code blocks wrap the code in three backticks. Markdown should work.
Provide a URL of your site/webpage if something is not working.
  • This is what worked for me.

    html {
    height: 100%;
    }

    body {
    display: flex;
    flex-direction: column;
    height: 100vh;
    }

    .ct-div-block { /* This was important for any screens taller than the screen otherwise the footer would appear half way up the page. */
    flex: 1 0 auto;
    }

    .site-footer {
    flex-shrink: 0;
    }

  • >
    linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
    %d bloggers like this: