sticky footer

1/* Use flex and set auto margin */
2body {
3  display: flex;
4  flex-direction: column;
5  min-height: 100vh;
6}
7
8footer {
9  margin-top: auto;
10}

1<style>
2.footer {
3   position: fixed;
4   left: 0;
5   bottom: 0;
6   width: 100%;
7   background-color: red;
8   color: white;
9   text-align: center;
10}
11</style>

1html, body {
2  height: 100%;
3}
4body {
5  display: flex;
6  flex-direction: column;
7}
8.content {
9  flex: 1 0 auto;
10}
11.footer {
12  flex-shrink: 0;
13}