Skip to content

Positioning the footer at the screen bottom

On pages with short content on tall screens, the default theme can display a large space below the footer.

footer-at-screen-bottom-orig.png

You may wish to fix the footer to the bottom of the page, rather than right below the content.

This can be done by giving the .page-wrapper class the css properties min-height: 100vh and a display: flex with flex-flow: column.
Also, give #maincontent a flex-grow of 1.

To do so, add the following XML to the <body> section of a default.xml file in your theme, for example Magento_Theme/layout/default.xml.

<referenceContainer name="page.wrapper" htmlClass="page-wrapper min-h-screen flex flex-col"/>
<referenceContainer name="main.content" htmlClass="page-main flex-grow"/>

With this, the footer will stick to the bottom of the screen, with the empty space above it.

footer-at-screen-bottom-changed.png