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)


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

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


.page-flexbox-wrapper{
  display: flex;
  min-height: 100vh;
  flex-direction: column
}

main{
  flex: 1 1 auto;
}

Advertisements