What about footers on website which stays below to your content? What if your content is not long enough to fill the whole page? Does your footer not able to stay at the bottom of the page?

Above situation occurs with all of us. Sometimes we want our footer to stick with the bottom and slide down with the content when our content grows. We cant make it absolute and set bottom:0 because at no matter what we don’t want to float over to the content. Its looks YAAK.

Here is a simple trick which can save us. Let’s look at it.

1. Divide your page in parts as shown below

   <div class="parent">
   <div class="header">Header</div>
   <div class="content">content</div>
   <div class="footer">footer</div>
   </div>
   

2. Make your parent’s min height 100% .i.e

   min-height:100%;

   also remember to make your html and body to be 100% in height.

   html,
   body {
    margin:0;
    padding:0;
    height:100%;
   }
   .parent {
     min-height:100%;
     position:relative; /* we have to keep it as relative.*/
   }
   

3. Finally, make your footer absolute and adjust its top and bottom properties as per your requirement.

   .footer {
     position:absolute;
     height:40px;
     width:100%;
     bottom:0;
     left:0;
     border-top:1px solid;
   }
   

We also may want to add some padding to our content.

.content {
  padding:20px 20px 60px 20px;
}

Running plunkr can be seen here. http://l.sgoyal.net/261FX5a

Let me know other ways to achieve this.

 

Cheers!

Happy Learning!