how to set footer at the bottom when there is no content

Answer 1

You have three options from which I would suggest using flex-box.

1. position: fixed

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

2. Flex-box

HTML

CSS

html {
    height: 100%;
}

body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

Demo: https://codepen.io/marcobiedermann/pen/XpoarE

3. Table

HTML

CSS

html {
    height: 100%;
}

body {
    display: table;
    min-height: 100vh;
}

main: {
    height: 100%;
}

footer {
    display: table-row;
    height: 1px;
}

Demo: https://codepen.io/marcobiedermann/pen/jImsc