#site-content {
  min-height: 100%;
  min-height: 100vh;
  padding-top: 65px;
  position: relative;
  z-index: 1;

  -webkit-box-shadow: #000 0 7px 35px 0;
  -moz-box-shadow: #000 0 7px 35px 0;
  box-shadow: #000 0 7px 35px 0;
  
}

#site-footer {
  padding: 25px 0;
  font-size: 85%;
  background-color: #2A2A2A;
  position: fixed;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 0;
}

/* NOT NEEDED, THIS IS JUST FOR THE PEN */
@import url(//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css);

html, body {
  padding: 0;
  margin: 0;
  background-color: #D1D1D1;
}
#site-content {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('http://dummyimage.com/3000x3000/D1D1D1/2A2A2A.png?text=Scroll+Down');
}

#site-footer {
  min-height: 20vw;
  /* DID THIS SO YOU CAN SEE IT AUTOMATICALLY SCALE - SIMULATION RESPONSIVENESS */
  /* RESIZE THE WINDOW AND THEN SCROLL VERITCALLY AGAIN */
  background-size: cover;
  background-position: center;
  background-image: url('http://dummyimage.com/1500x1500/2A2A2A/FFF.png?text=Footer+Area+(Resize+Me)');
}

$(document).ready(function() {
  
  // INITIATE THE FOOTER
  siteFooter();
  // COULD BE SIMPLIFIED FOR THIS PEN BUT I WANT TO MAKE IT AS EASY TO PUT INTO YOUR SITE AS POSSIBLE
  $(window).resize(function() {
    siteFooter();
  });
  
  function siteFooter() {
    var siteContent = $('#site-content');
    var siteContentHeight = siteContent.height();
    var siteContentWidth = siteContent.width();

    var siteFooter = $('#site-footer');
    var siteFooterHeight = siteFooter.height();
    var siteFooterWidth = siteFooter.width();

    console.log('Content Height = ' + siteContentHeight + 'px');
    console.log('Content Width = ' + siteContentWidth + 'px');
    console.log('Footer Height = ' + siteFooterHeight + 'px');
    console.log('Footer Width = ' + siteFooterWidth + 'px');

    siteContent.css({
      "margin-bottom" : siteFooterHeight + 50
    });
  };
});