Discuss

Push Footer to bottom of viewport

With this example, I will show how to create a footer which stays at the bottom of the viewport unless the page content pushes it further.

We start with a page that contains the normal ingredients:

Right-click App and from the dialog, choose Blocks, Navigation and a navigation structure of your choice. For this example, we have chosen Brand Menu.

Right-click Header, choose to add component after, stay with Suggested and add the Main element.

To add the Footer, right-click Main, select to add after, choose Blocks, Footers and the Footer of your choice.

Next, we need to push the Footer to the bottom of the viewport. For this, we need to attach a stylesheet to our document. Choose the Styles panel, click the + sign and choose to Attach CSS file. Choose the file and hit Open.

Then we will add a few style rules to position our Footer. Click on Code view, select the HTML element, Click the + sign and choose our style sheet.

Note: Experienced users can jump to the ADDENDUM at the end of this tutorial.

Make sure to choose the html selector in your style sheet, not the one that says _reboot.scss or similar. Then add the two style rules as shown.

Note: overflow-y: scroll; is a legitimate way to prevent the jump between scrollbar and no-scrollbar pages. The problem with this is that the scrollbar is always showing. A better way is to replace this with a hack (back to hacks???), namely margin-left: calc(100vw - 100%);

Select the Body element click the + sign and choose your style sheet.

You will notice that Wappler has chosen the ID as the selector. This is not what we want because other pages will have a different Body ID. To change this, click on style.css

This will open our style sheet where we can change the selector

Change #index to body, save the style sheet and close it

Add the three style rules as per example

Our last style rule applies to the Main element as follows

Back in Design view, refresh the document and see that the footer has been pushed to the bottom of the viewport.

Don’t forget to save your work.

ADDENDUM

If you are of a more adventurous type (read: experienced user), you can enter the style rules directly into the style sheet, thus saving having to go steps 6 through to 13.

Click on File Manager to open the Project Folder, ensure that you are viewing the local version and double-click the style sheet to open it.

Add the following style rules to the style sheet:

    html {
      min-height: 100%;
      margin-left: calc(100vw - 100%);
    }
    body {
      display: flex;
      flex-direction: column;
      min-height: 100vh;
    }
    main {
      flex: 1 0 auto;
    }

The saved style sheet will look like, where Wappler has added the necessary prefixes.