Footer not sticking on the bottom of my page. It only goes until the bottom of my screen. (HTML CSS)

Issue

My footer is not sticking on the bottom of my page. It only goes until the bottom of my screen, but when I scroll down, the footer is stuck on the location where my bottom of screen was. It sticks on the bottom of my screen but not on the bottom of my entire page. Someone please help I almost tried everything. The body and html doesn't take up the size of my whole page too, only the size of my screen which is 1920 x 1080. I tried every sizes like 100vh, 100%, min-width, set the footer div to absolute with bottom: 0, and none of them works :( (I'm also a newbie)

One time I managed to make the body fill the whole page but the footer is still stuck in the position.

Solution

Try to set body to:

position: relative (so the footer sets it's absolute position according to the bodys position)

You might even need to do:

   body {
        min-height: 100vh //as you have already
        position: relative;
        padding-bottom: 150px //same height as you footer
    }

Answered By - Pauline