Fixing the Footer at the Bottom (without Using 'display:flex')
·Sep 15, 2022·
1 min read
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.