Sticky footer at bottom using CSS and HTML

This tutorial demonstrates how to keep the footer at the bottom of the page on short documents or pages with little content using CSS and HTML.

In this example we will see how it works.

Final output will be as shown below in the screen-shot.

sticky footer at bottom using html, css

HTML Part

 

In the above source code we have main wrapper div with class container. Inside container we have header, left sidebar, content and footer. So when we will apply the css then the footer will sit at the bottom whether content section holds any content or not. CSS part is given below. You can either include the below style inside the <head/> tag or you can use as an external css file and then include the css style into the <head/> section of the HTML.

Thanks for your reading. Please leave a comment if you have any query.

Soumitra

Software Professional, I am passionate to work on web/enterprise application. For more information please go to about me. You can follow on Twitter. You can be a friend on Facebook or Google Plus or Linkedin

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.