Making the footer always at the bottom if there is little or no content in the page

Sometimes you will need to show the footer at the bottom of the page when there is little or not content. and not directly after the contents because this makes the footer alittle bit lifted up and not elegantly shown on the page.

There are numerous solutions & suggestions for this situation, Here are some of them:

1. Use a page container that has a min-height of 100vh, and the header outside it and inside it add a div for the contents and the footer. make the page container position relative and the footer and header absolute.
   

       <header>
   
           Header
   
       </header>
   
   
   
       <div class="pageContainer">
   
           <div class="contents">
   
               Contents
   
           </div>
   
           <footer>
   
               Footer
   
           </footer>
   
       </div>
   
       

   
   

       <style>
   
           *{padding:0px; margin:0px;}
   
           .pageContainer{
   
               background-color:#EAEAEA;
   
               /* min-height: 100vh; */
   
               min-height: calc( 100vh - 80px );
   
               position: relative;
   
               padding-top: 80px;
   
           }
   
           .contents{
   
               border: 1px solid red;
   
               height: 600px;
   
               padding-bottom: 50px;
   
           }
   
           header{
   
               background-color: aqua;
   
               height: 80px;
   
               z-index: 100;
   
               position: absolute;
   
               left: 0px;
   
               right: 0px;
   
           }
   
           footer{
   
               background-color: #fff;
   
               position: absolute;
   
               bottom: 0px;
   
               left: 0px;
   
               right: 0px;
   
               height: 50px;
   
           }
   
       </style>?
   
      
       
   
           
   
                
                             
           
       
      
       
   
           
   
                
                                                                    footer at the bottom
                                       footer at the bottom of the page
                                       footer always at the bottom
                                             
           
       
   
       
           
   
       
   
           
   
                           
           
           
   
               
   Mohammed Anwar
               
   Experienced technical lead PHP, MySQL and Laravel Developer for 15+ years, with proven ability to develop and create high-quality and optimized web applications. Great ability to build and optimize database design, schema and queries. Versed programing trainer and instructor delivering web courses and helping others to get into the field in a timely manner. Fast and eager learner for new technologies .