how can i extend a footer to bottom of page?

I was searching for a solution to this exact problem, and I came across a very simple way of achieving the effect I was going for:

footer {
    box-shadow: 0 50vh 0 50vh #000;
}

This creates a shadow which will fall off the screen if not needed, but otherwise will give 100vh (a full viewport height’s worth) of coverage to the space below the footer, so the body background doesn’t appear below it.