Sticky Footer is a special type of footer.If there is a little content on the web page  it will always stays on the bottom of the page regardless how little the content is.But if there is a lot of content  then the footer will  be pushed down. Therefore sticky footer is completely different from fixed footer.

Following is a perfect working example for adding a sticky footer to a responsive web page

Following is the format of the “index.html” of the materialized web page.(Note:You must follow this format in your web page (header–>main—> footer) in order to get the correct result)

<div class= " page-flexbox-wrapper " >
--------header content----------------------- 
-------main content---------------------- 
 <footer class= " page-footer " >
 -----footer content-------- 
 </div >

To make the footer to sticky we should add following css code snippet to the main css file.

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

  flex: 1 1 auto;