Search code examples
cssmaterial-designmaterialize

Materialize CSS - Sticky Footer

I followed the steps mentioned here - http://materializecss.com/footer.html - to create a Sticky Footer, but the results are not as expected.

I copy pasted the following code to the materialize.min.css file:

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

  main {
    flex: 1 0 auto;
  }
Solution

  • You're probably not using the <main> tag

    Note: We use flexbox to structure our html so that the footer is always on the bottom of the page. It is important to keep the structure of your page within the 3 HTML5 tags: <header>, <main>, <footer>