Fixed height footer
If the footer has a fixed height, the solution is simple.
We apply “position: relative” to the html tag and then “position: absolute” to the footer element, so we get the control of it. Some great explanations on this position technique you can find here
To prevent the content overlapping the footer, we are adding “margin-bottom”, which is equal to the footer height, to the body tag.
While creating responsive sites, sometimes we face the problem that the footer height changes for different devices. In this case we should use media queries to apply different “margin-bottom” for various devices
The example and full code
If you have any thoughts, just let me know.
Thank you for your time!