Best sticky footer

#css

#html

#sticky footer

#header

#footer

#table layout

#main

I was always struggling with placing the footer at the bottom of the page, where it should be. And after trying numerous ways, (with javascript, with flexbox etc.) I've found the following to work best for me:

html:

<html>
    <head>...</head>
    <body>
        <header class="page-header">...</header>
        <main>
           [put block-level elements here]
        </main>
        <footer class="page-footer">...</footer>
    </body>
</html>

css:

html {
    height: 100%;
}

body {
    display: table;
    width: 100%;
    height: 100%;
    table-layout: fixed; /*1*/
}

main {
    display: table-row;
    height: 100%;
}

What this will do, is push the header and footer to the top and bottom of the page. You'll need to put block-level elements in the main for your layout, to use margins and paddings, since display: table-row doesn't take margins and paddings.