How to push footer to the bottom in Oxygen

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.