Trick to make your footer sticky at the bottom of the page and stay at the bottom when your content grows.

Standard

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!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s