Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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;   } 
like image 683
xennygrimmato Avatar asked Apr 17 '15 15:04

xennygrimmato


People also ask

What is a sticky footer in CSS?

A sticky footer pattern is one where the footer of your page "sticks" to the bottom of the viewport in cases where the content is shorter than the viewport height.

Is materialize responsive?

Materialize provides a container for embedded videos that resize them responsively. To do this, wrap them with the containing div, which adds the class video container. And the third class is a responsive video.

Is materialize CSS Free?

Materialize is an open source project that is completely free to use. We hope you have enjoyed using Materialize and if you feel like it has helped you out and want to support the team you can help us by donating or backing us on Patreon.


1 Answers

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>

like image 79
Kenneth De Win Avatar answered Oct 03 '22 18:10

Kenneth De Win