Materialize CSS - Sticky Footer

css material-design materialize
xennygrimmato picture xennygrimmato · Apr 17, 2015 · Viewed 27.7k times · Source

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

Answer

Kenneth De Win picture Kenneth De Win · Apr 23, 2015

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>

Related questions

Horizontal and vertical alignment in materialize framework

How can I center the login box both horizontal and vertical? Here is my structure: <div class="container"> <div class="row"> <div class="col s12 m6"> <div class="card"> <div class="…

Read More
Materialize framework: responsive logo in navbar

I'm creating a website in materialize framework. I have a problem with logo in navbar. So my logo is very big (6202x3800 px) and I don't have any other version. I want to put this logo in navbar but it …

Read More
Modal dialog with fixed header and footer and scrollable content

I'm trying to create a modal dialog that has an fixed header and footer and that the content (in this case list of users) inside the modal dialog is scrollable... My best attempt so far gave me the result on …

Read More