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.


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.