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

If your using a Genesis child theme then check out my other tutorial: Creating a sticky / fixed footer in a Genesis child theme

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. It is called a fixed footer which is then fixed in place. The meaning of sticky and fixed have become blurred. One would say a sticky header for a header that moves with scroll. A fixed footer for a footer that stays at the bottom of the page but on scroll does not move along with the scroll.

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.

A resource:
jsfiddle.net/juroto/HL6Ad