Fixing the Footer at the Bottom (without Using 'display:flex')

·

1 min read

Problem

If you look at the example below, the footer is not at the bottom.

Solution (without Using 'display:flex')

The solution is subtracting the header height and the footer height from 100vh.

If the Header Is 'position:fixed'

Because the header floats(?, I am not sure whether this is a correct expression.), the rest parts start from the 'top:0'. So, we have to subtract only the footer height.

If the Header Is 'position:sticky'

Because the header doesn't float at the first time, we have to subtract the header height too.