CSS – Keep footer on bottom of page

Even with a simple, one column design, an issue can arise when there is minimal content on the page. A footer will no longer be  at the usual desired location, at the bottom of the page. There will instead be a blank area underneath the footer.

This problem is described fairly well here: How to keep footer where it belongs . That page also includes an appropriate solution, using the ‘position:absolute’ css rule. It does rely on knowing the height of the footer during the site design stage. Key elements of this approach are:

• Put a min-height on the body tag of 100vh so it will never be too short to cover the page. 
• Put the footer at the bottom of the body using position:absolute and bottom:0px
• Add padding-bottom of the same height to bottom of the body tag so no content is obscured by the footer

Here is the CSS:

body{
  min-height:100vh;
  padding-bottom:100px; /* For footer equal to 100px */
}

.footer{
  position:absolute;
  bottom:0px;
}

 

To be more clear… I describe the issue and the related solution here: 

When the content does not span the full height of the page, the footer, if just placed underneath the content, will end up somewhere in the middle of the page. By setting the body as having min-height 100vh (ie 100% of the page), it ensures the body tag extends to the bottom of the page.  Then, by setting the footer position to ‘absolute’ and bottom to ‘zero‘,  the footer is forced to the bottom even when the amount of content does not fill the page. 

By using ‘absolute’, however, the content can end up being obscured if it’s height is enough to cover the page. Hence, the adding of padding at the bottom of the page to ensure content does not move underneath the footer.