JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
	<div class="w1">
		<div class="w2">
            <div id="header">sdfsdfsd sdf sdf sd fs df</div>
			<p>content of the page</p>
		</div>
	</div>
	<div id="footer">
		<div class="holder">
			<div class="frame">	
				<p>footer content</p>
			</div>
		</div>
	</div>
</div>

CSS

html{height:100%;}
body{
	margin:0;
	height:100%;
	text-align:center;
}
p{margin:0 0 10px;}
#wrapper{
	width:100%;
	height:100%;
	display:table;
	margin:0 auto;
}
.w1{
	width:100%;
	display:table-row;
	background:#0ff;
}
#header {background: #ccc;}
#footer{
	width:100%;
	overflow:hidden; /*for FF on Windows 7*/
	display:table-footer-group;
}
#footer .holder{
	height:1%;
	display:table-row;
	background:#f00;
}
#footer .frame{display:table-cell;}