How to stick the footer to the bottom when there is very little content.

If one has very little content the footer will go further up on the page. To have it stick to the bottom one has to add additional code. The code will change depending on the theme one uses.

The following CSS code worked when I tested it out in the new default theme Twenty Seventeen.

Here is some code that works pretty well.

(Page = html, body or the full area of the screen.)
 #page {
 position: relative;
 -ms-word-wrap: break-word;
 word-wrap: break-word;
 /* Sticky footer code*/
 display: flex;
 min-height: 96.3vh;
 flex-direction: column;
 }

(site-content = can also be the .content)
 .site-content {
 padding: 2.5em 0 0;
 /* Sticky footer code*/
 flex: 1;
 }

Based on:
https://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

Here is some other code I used with a theme from Beans Framework to get the footer to stick to the bottom.

html, body {
 font-size: 16px;
/* Sticky */
 margin:0;
 padding:0;
 height: 95%;
 line-height: 1.4em;
 background-color: #000; 
}

/* Sticky code */
.tm-site {
 min-height: 100%;
 position: relative;
 background-color: #fff;
}

/* body/content for sticky footer */
.tm-main {
 padding-top: 30px;
 padding-bottom: 80px; 
}

.tm-footer {
 padding: 10px 10px;
 background-color: #000;
/* Sticky code */
 position: absolute;
 bottom: 0;
 width: 100%;
}

A fixed footer is to fix the footer so that it always remains visible in the view port of the browser.
Even though the page might have a lot of content the footer will always remain visible.

Just add through the CSS add to the footer a position: fixed. It will fix the footer to the bottom.