Content starts at the bottom of the page

The challenge is to have content begin at the bottom of the page.
Here is an example:

One can see the gallery building, red phone booth and the site header containing the site title and menu. Resizing the browser vertically moves the site header and everything below it upward (sticking it to the bottom).
Scrolling downward one will see the content below the site header.

Something like this: https://jsfiddle.net/paaljoachim/22rL1oh7/10/

The JS code makes the site header stick to the bottom as is seen above.

 

The Code

functions.php

Inside the child theme functions file:

function stickybottomcontent(){ 
 /* wp_register_style( 'stickycontentcss', get_template_directory_uri() . '/css/sticky.css');
 wp_enqueue_style( 'stickycontent' ); */
 
 wp_register_script( 'stickycontent', get_stylesheet_directory_uri() . '/js/sticky.js', array('jquery')); 
 wp_enqueue_script( 'stickycontent' );
}
add_action('wp_enqueue_scripts', 'stickycontent');

I decided to make a comment tag around the sticky.css. As I really do not need to have a separate CSS file for this as I will be using the site-container class inside my stylesheet instead of adding it to an external CSS file.

sticky.js

I made a sticky.js file inside a js folder located in the root of the child theme folder.
Containing the following code:

jQuery(document).ready(function() {
 $WINDOW = jQuery(window), //define window
 $header = jQuery('.home .site-container'); //in Wrapper of content that will be at bottom
// js function
 function setContainerOffset(){
 $header.css({ top: $WINDOW.height() - 150 }); 
 //$WINDOW.height() is height of browser windw
 } 
 //call function on start
 setContainerOffset();
 //call function on resize of browser
 $WINDOW.resize(setContainerOffset); 
});

Notice the .site-container class tag. The site container is a wrapper containing all the content of the site.
A tip: As I plan on only use the bottom sticky content on the home page I changed .site-container to become .home .site-container.

style.css

Inside the default stylesheet I am using this code for the .site-container (site wrapper).

/* Added code for pushing the container to the bottom of the home page. */
.home .site-container {
 position:relative;
 z-index: 12;
 max-width: 1140px;
 margin:0 auto;
 background: #fff;
}

/* Normal container for the rest of the pages */
.site-container {
 background-color: #fff;
 max-width: 1140px;
 padding: 10px 0px 10px 0px; 
 margin: auto;
} 

After having added the code to the functions file, the js code and the CSS code it worked on my end.

If there is a simpler way of doing this do please let me know.

I received some great help on how to do this through the Advanced WordPress Facebook group.