CSS for sticky footer

sticky-footer.css

/*
This is the CSS to create a "sticky footer". That is, the footer will always be
at the bottom of the page, even if the amount of content doesn't push it down
that far, but if there is more than enough content it will not appear until you
scroll down to see it.

I've seen a couple different things about this, but they usually include a lot
more CSS than is necessary, and it's hard to know what is necessary and what is
superfluous. This is only the necessary pieces of CSS from what I can tell.
*/

html {
    height: 100%;
}

body {
    min-height: 100%;
    position: relative;
    margin: 0 auto; /* top/bottom need to be 0, left/right doesn't matter */
}

footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}

header, footer {
    padding: 1em; /* Necessary if you want background color/image */
}

main {
    
    /* Height of the footer plus any padding. This is to stop the footer from
       covering the bottom portion of the page, since it is positioned
       absolutely. */
    padding-bottom: 2rem;
}