JSFiddle - React, Tailwind, and code Playground

by Felipe Douradinho

HTML

<!-- html5 shiv for IE8 and under -->
	<!--[if lt IE 9]>
	  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	<!-- If you aren't using jquery you can use the body element instead (body{width:100%;display:table;height:100%})of the #wrap div as jquery has a bug (
	http://bugs.jquery.com/ticket/7261) in webkit when the body is display:table. -->

	<div id="wrap">
		<header><h1>Cabeçalho (Funciona no FF, IE 8+, Chrome)</h1></header>

		<main class="content">
			
			Conteúdo aqui

		</main>

		<footer class="footer"><p>Rodapé</p></footer>
	</div>

CSS

html, body,#wrap {margin:0;	padding:0;	height:100%;}
		#wrap {display:table;width:100%}
		/* if ie7 support is needed then set height of #wrap and header and footer to auto in CC's and just let it have a normal layout (or: *+html #wrap{height:auto})*/
		.content { background:#ccc; }
		header {	background:#999;	color:#fff;	text-align:center;	padding:10px 0}
		header, .footer, main { display:block}/* ie7 and under*/
		header, .footer, main { display:table-row }
		/* height 1px on the header and footer is the sticky footer technique */
		header, .footer{height:1px}
		h1{padding:10px;margin:0;}
		.footer {background:#999;	color:#fff;	text-align:center;}
		.footer p {	margin:0;	padding:10px}