JSFiddle - React, Tailwind, and code Playground

by briggs_w

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<div class="contentAreas">
		<div id="header">	HEADING HERE. SHOULD ALWAYS HAVE SAME HEIGHT.	</div>
		<div id="mainArea">
			This part should be<br>as long as needed<br>for its content<br>but should not run out of<br>the div it's in.
      </div>
		<div id="footer">Footer should stay at the bottom, regardless of page size.</div>
	</div>
</body>
</html>

CSS

body							
{
	background-color:white;
}

.contentAreas					
{
	background-color: gray;
	border: 10px solid green;
	position:absolute;
	top: 40px; bottom : 40px; left: 40px; right: 40px;
}

div#header						
{
	background-color: red; 
}

div#mainContentArea 
{
	background-color:  yellow
}

div#footer
{
	background-color: aqua;
	position: absolute; bottom: 20px;
}