How can keep the footer in the bottom of the page

I have seen a lot of web developers struggled to maintain the footer at the bottom of the page.

Problem

Please see the image below.

If a web page has more content, the footer will drop down to the bottom of the screen and the page end at the footer. The same have only less content the footer clings with the content and empty space would be created based on viewport height.

We have seen many failed attempts from most of the developers to fix this issue with positioning in CSS or JavaScript instruction. But the solution to this problem is very simple.

The solution

Please set your HTML and CSS codes in the following ways.

You can solve this issue with the positioning in CSS. First, you have to set a container div (class “container” in the above picture) with the relative position which will include the header, content and the footer.  Set your header and page content inside the container. The page content must have the padding-bottom value which is equal to the height of the footer. At last, you can set the footer inside the container div and with absolute position.

Please see the Demo