Page Footer

Materialize offers a predefined page footer.

Basic Footer

There are 2 main parts of the page-footer:

  • Footer Content
  • Copyright Section.
Sticky Footer

A sticky footer always stays on the bottom of the page regardless of how little content is on the page. However, this footer will be pushed down if there is a lot of content, so it is different from a fixed footer. 

Add the following CSS to the page via the custom app.css

        body {
            display: flex;
            min-height: 100vh;
            flex-direction: column;

        main {
            flex: 1 0 auto;

See the Pen Material-Footer by roy degler (@rdegler) on CodePen.

Additional Resources