Keep the < Footer > Always at the bottom of the web page using pure CSS : A Vanilla Minimalistic approach that work’s across all browsers (without `VH `)!

This is a small post regarding a requirement that comes up most of the time when you are setting up your base HTML skeleton (in SPA , in Non SPA , in SSR and what not ) where they would always ask you to make your beautiful footer appear at the bottom after the main content area( when the content of the body overflows the view port ) and make your footer stick at the very bottom of the view port when there is not enough content on the page, which if not taken care , might leave your footer sit halfway up the page leaving up a blank space underneath and thus our <footer> will not even fulfilling its basic English definition of a `Footer` being a `Footer` !!

SOLUTION

Step 1 : HTML

Lets start with the HTML Mark Up, A minimal HTML markup looks like this

Step 2 : CSS STYLE

Add the below CSS properties at the root of `css` file or as part of your CRP, [ this below is the minimal CSS needed ]

Combine the HTML structure + CSS

Below is the example of a code that explains how the above HTML structure + CSS can be incorporated into your base HTML skeleton. Feel free to copy the code and LIT up your favorite `Live Server ` or `Python SimpleHTTPServer` to see it in action.

And VOILA , That’s It !! this should fix our footer problem forever, now you can add your WebComponents / vueJs / react components within our <footer> element which should stick always at the bottom of the webpage and works across the all the modern and legacy browsers.

[NOTE : The above code should work without any issues until and unless there are no overriding CSS present in your critical rendering path, So check and make sure to include this CSS as part of your base css, this should be enough]

Live Demo

Finally I will wrap this post by embedding the Sandbox code that shows you live preview of the code working for both the scenarios mentioned in the problem statement.

NOTE : To view the live demo below make sure that you have allowed third party cookies access in the browsers ( mostly in incognito mode 3rd party cookies are blocked by default).

Scenario1 : Make footer always appear at the bottom of web page when there is overflow of content

footer sticks at the very bottom of the view port when there is no enough content in the view port

Scenario 2 : Footer should always sticks at the very bottom of the view port when there is no enough content in the view port.

Thank You for reading : ) Feel free to comment below and let us known if there is any further simplification we can do here or if you found out any issues . Cheers !!