Als erstes ist es dabei wichtig, den Browser in einen Standardkonformen Modus zu schalten. Absolut nötig ist dazu die Documententypangabe.
HTML-Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Wichtig ist auch eine Inhaltstyp Metaangabe, der Zeichensatz muss ggf. angepasst werden:
HTML-Code: 
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
Danach die Frage: warum kompliziert, wenns auch einfach geht? Absolute Positionierung ist toll, aber nicht oft notwendig.

Das tuts doch auch oder?
HTML-Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>position</title>
<style type="text/css">
html, body {
 margin: 0; padding: 0;
}
body {
 margin: 1em;
}

#wrap {position:relative; background:green;}
#header { height:100px; background:orange;}
#body { background:purple; }
#footer {  height:50px;  margin:0.1em 0; background:red;}
#wrap, #head, #footer, #footer { border:solid 1px black; }
</style>
</head><body>
	<div id="wrap">

		<div id="header">
			header
		</div>
		<div id="body">

			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>
			body <br>

		</div>

		<div id="footer">
			footer
		</div>
	</div>

</body></html>
Btw: style="" Attribute sollte man vermeiden, wenns auch wesentlich besser geht