<div id="site-content"></div> 
<div id="site-footer"></div>

#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
		});
	};
});