Table of Contents & Menu
On this page
Navigation

Implement a Sticky Footer

On pages with short content, the default theme may display an empty space below the footer, affecting the page's appearance.

Original footer positioning

Solution

To position the footer at the bottom of the screen, even on pages with minimal content, apply the following CSS adjustments:

  1. Modify the .page-wrapper Class:
  2. Set min-height: 100vh to ensure the wrapper takes up the full viewport height.

  3. Use display: flex and flex-flow: column to align content vertically.

  4. Adjust the #maincontent Class:

  5. Apply flex-grow: 1 to make the main content section expand and fill remaining vertical space.

Implementation

To apply these CSS adjustments, add the following XML within the <body> section of your theme's default.xml file (e.g., 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"/>

These changes ensure the footer consistently "sticks" to the bottom of the screen, providing a more uniform layout across various screen sizes, with any extra space appearing above the footer.

Changed footer positioning