JSFiddle - React, Tailwind, and code Playground

by Solomon Mokua

HTML

<body>
	<div class="mainContent">
		<h2>Very Few Content</h2>
		<p>
		    As you can see, this page has very little content, barely enough to fill this page yet the footer stays at the bottom.
			The fun part is that when the content increases, the footer will be pushed down and you will only see it if youe scroll down to th end of the document. Add more content on the page to see this.
		</p>
	</div>
	<footer>
		<div class="footerContent">
		<p>
			I'm the awesome footer, I always stay at the bottom of the page .....
		</p>
		</div>		
	</footer>
</body>

CSS

html, body{
	padding: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	display: table;
	font-family: sans-serif;
	background: url(http://s17.postimg.org/6o5of87in/background.jpg);
	background-size: cover;
}
.mainContent{
	padding: 15px;
	width: 50vw;
	margin: 50px auto;
	background: #fff;
}
footer{
	background-color: #2271d1;
	display: table-row;
	height: 50px;
}
.footerContent{
	padding: 15px;
	width: 50vw;
	margin: 0 auto;
	color: #fff;
}