A footer is the last element on the page. At a minimum it is at the bottom of the viewport, or lower if the page content is taller than the viewport. Simple, right? When working with dynamic content that includes a footer, a problem sometimes occurs where the content on a page is not enough to fill it.
When it comes to building layouts and positioning content on a page there are a handful of different techniques to use. Which technique to use largely depends on the content and the goals of the page, as some techniques may be better than others. For example, the ability to float elements side by side provides a nice, clean layout that is receptive to the different elements on a page. However, when more strict control is needed, elements may be positioned using other techniques, including relative or absolute positioning.
The bottom CSS property participates in setting the vertical position of a positioned element. It has no effect on non-positioned elements. The source for this interactive example is stored in a GitHub repository.