JSFiddle - React, Tailwind, and code Playground
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" style="height: 100%">
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.2.0/build/cssreset/reset-min.css">
<style type="text/css">
html, body{ height:100%; }
#outer{ /* footer stick to bottom */ min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -1.5em; /* end footer stick to bottom */ }
.header { background-color: red; }
.footer, .push { height: 1.5em; }
.footer { position:relative; background-color: blue; text-align:center;}
</style>
<script type="text/javascript">
$(function ()
{
$("#grow").click(function () { var a=$("<div>test</div>").hide(); $(".header").append(a); a.slideDown(); });
$("#toggle").click(function () { $("#text").toggle(); });
});
</script>
</head>
<body>
<div id="outer">
<div class="header">
header <a id="grow" href="#">grow</a>
</div>
<div class="content">
<h3>Lorem:</h3>
<p><a id="toggle" href="#">toggle</a></p>
<p id="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam faucibus, nisl nec egestas molestie, orci quam adipiscing
neque, ut luctus ante lorem non enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Donec neque urna, euismod nec eleifend nec, imperdiet id nunc. Sed id orci sed magna varius rhoncus eget quis nulla. Aliquam
posuere erat ut leo suscipit adipiscing. Integer tortor sapien, ornare in cursus sit amet, facilisis eget enim. Duis leo
nulla, fringilla eget vestibulum vel, pretium ut purus. In dictum...