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



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.

Leave a Reply

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