If your website contains a very short page (shorter than the height of the browser window) you will probably notice a gap at the bottom.
In many cases this gap does not look nice visually. You may want to make some HTML/CSS adjustments to make pages with short content look nicer.
Approach 1: Adjust Body Background
This approach involves setting the body background to same as the footer background. This is a very simply solution and ‘minimally invasive’ to your code. In some cases, the underlying reason a ‘floating footer’ looks bad is because it stands out so much from the body background. Rather than trying to adjust the footer component, adjusting the styling of the body element could be a suitable fix. Here is the same page depicted above, but with adjustments to the body background to make it seamless with the footer component. Naturally this works with dynamic footer heights too.
Approach 2: JavaScript Adjustments on Resize
This approach is good for when you want to apply a sticky footer to an existing codebase that is not using (or can’t use due to browser requirements) CSS flexbox.
This approach should only be used if it would be a considerable amount of work to rework the CSS of an existing website to use flexbox (or grid if you are reading this ~6 months from now :)). If you are starting a new project I would highly recommend the flexbox approach to implementing a ‘sticky footer’. The approach discussed here will get the job done, but is not as elegant or efficient.
Here are the characteristics of this approach:
- works with dynamic heights
- has additional benefit of allowing you to choose which element (incliding child elements) should expand to fill the extra space when needed
Take a look at this example on CodePen to see it in action.