Discuss

Push Footer to bottom of viewport

On this page

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.

  1. We start with a page that contains the normal ingredients:

image|690x473

  1. 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.

image|690x473

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

image|690x473

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

image|690x473

  1. 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.

image|690x473

  1. 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.

image|690x473

  1. 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%);

image|690x473

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

image|690x473

  1. 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

image|690x473

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

image|690x473

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

image|690x473

  1. Add the three style rules as per example

image|690x473

  1. Our last style rule applies to the Main element as follows

image|690x473

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

image|690x473

  1. 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.

  1. 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.

image|690x473

  1. 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;
     }
    

    image|690x473

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

image|690x473