I wanted the footer of my web applications to always stick to the bottom of the page, regardless of the size of the content of the page.
I didn’t want the footer to be displayed in the middle of the page, when the height of the content was small.
I set a minimum height on the content as some portion of the web browser window height.
One approach was to set the
min-height of the content to
100vh ,with vh being the viewport height. This resulted in having to scroll down to see the footer.
Another approach was to calculate the
min-height of the content based on the height of the footer, such that we would not have to scroll down to see the footer.
I set the footer height as
7rem and set the
min-height of the content as
calc(100vh — 7rem) .
I had a parent container, within which I had the content element, and the footer element.
I set the height of the body to 100%, with no margins or paddings.
The container class only set its position to relative. This would prove useful position elements within the container.
In the content class I set the minimum height, a background color, and I position the text centrally using flex.
min-height: calc(100vh - 7rem);
Finally for the footer I set the height, background, and positioned the text centrally as well.
Please view the demo on my code pen repository.
I may add an article about including a navigation bar in the page sometime in the future.
Please let me know if I made any mistakes, or if there are better ways to do it. Any feedback is appreciated!