Make the Footer Stick to the Bottom of a Page

When a page contains a large amount of content, the footer is pushed down off the viewport, and if you scroll down, the page ‘ends’ at the footer. However, If the page has small amount of content, the footer can sometimes ‘cling’ to the bottom of the content, floating halfway down the page, and leaving a blank space underneath, which looks ugly. So we need to make the footer stick to the bottom of page (not always fixed and visible).

View Demo

Although most pages on my site have enough content to push the footer to the bottom of the page for most people. I would like to know it’s always fixed to the bottom regardless of screen size from now on anyway. I have tried a number of ways such as bottom: 0x; position:absolute; etc. Never seems to work very well, occasionally pushes the footer out of its container to fix to the bottom using some of those examples right there. I have even seen people fixing it with JavaScript, finding out the height of the page and pushing the footer down after page load. But we are using simple CSS rules to let the footer stick to bottom in case of content height is less than viewport height.

Make the Footer Stick to the Bottom of a Page

This CSS sticky footer code pushes a website’s footer to the bottom of a browser window. It is valid CSS and HTML with no unsavory hacks, so it works in all of the major browsers. If our HTML is like :

In this HTML, we have a wrapper which is a container for all the page content and we are going to set the CSS of footer relative to wrapper. Add the following lines of CSS to your stylesheet to make the Footer Stick to the Bottom of a Page.

The padding-bottom in #content for the margin is the same number as the height of #footer (including any padding or borders you may add). Because here #footer has the position:absolute relative to wrapper means #content will reach to bottom of the page so we need to create the space for bottom by adding padding-bottom to the #content as the same height of the footer. But what if We don’t have wrapper element in the page like

Add the following lines of CSS to your stylesheet to make the Footer Stick to the Bottom of a Page.

Or we can also do it as follows :

View Demo

You Might Interested In

  • Sajjad Hossain Hira

    this code is working for me-
    #footer { clear: both; position: relative; z-index: 10; height: 3em; margin-top: -3em; }
    https://phpans.com/qa/643879