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

Question

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.

Answer 1

Most simple way to achive it is to make the body 100% of your page, with a min-height of 100% too. This works fine if the height of your footer does not change.

Give the footer-container a negative margin-top:

footer-container {
    clear: both;
    position: relative;
    height: 150px;
    margin-top: -150px;
}