No Javascript, no absolute positioning and no fixed heights are required for this one.
Here's an all CSS / CSS only method which doesn't require fixed heights or absolute positioning:
CSS
.container {
display: table;
}
.content {
display: table-row;
height: 100%;
}
.content-body {
display: table-cell;
}
HTML
<div class="container">
<header class="header">
<p>This is the header</p>
</header>
<section class="content">
<div class="content-body">
<p>This is the content.</p>
</div>
</section>
<footer class="footer">
<p>This is the footer.</p>
</footer>
</div>
See it in action here: http://jsfiddle.net/AzLQY/
The benefit of this method is that the footer and header can grow to match their content and the body will automatically adjust itself. You can also choose to limit their height with css.