Výška dokumentu

Ahoj, mám problém kterej rešim už pěknou chvilku a nemůžu se dobrat konce proto prosim o radu ty proziravější...
To co vidíte na obrázku, tak to se mi děje. Mám dokument kde chci až na konec pozadí ve stylu stínu a patičku usadit až na konec. Děkuji za případnou pomoc

Hledal sem pomoc u plaváčka ale jeho návod už sem jednou použil pro stránku která byla obsahově kratší než okno a le teď to nejde. (http://weblog.plavacek.net/2005-02.html#1108716997)
Ještě jednou díky

html {height: 100%;}

body {margin-top: 0px; margin-bottom: 0px; padding: 0px; text-align: center; font-family: Verdana, sans-serif; 

	font-size: 10px; background: #2AA4CC url("../image/bg.jpg"); height: 100%;}



#container {padding: 0px 38px 0px 38px; margin: 0px auto 0px auto; width: 557px !important; width /**/: 633px; 

	    height: 100%; min-height: 100%; background: url("../image/shadow.png") repeat-y center; position: relative;}

#head {padding: 0px; margin: 0px; width: 557px; height: 176px;}

#menu ul {list-style-type: none; padding: 5px 9px 13px 9px; margin: 0px; 

	height: 13px !important; height /**/: 35px; text-align: right;}

#menu li {display: inline; margin: 0px -4px 0px 0px;}



#menu a {display: inline; padding: 0px 7px 0px 7px; color: #2AA4CC; font-weight: bold; text-decoration: none;}

#menu a:hover {color: #000000;}



#main {background: #FFFFFF; width: 557px; padding-top: 15px; margin: 0px;}

#main img {padding: 0px 34px 0px 34px; margin: 0px;}

#main p {padding: 0px; margin: 78px; text-align: justify; width: 400px;}



#foot {background: url("../image/footer.png") no-repeat; width: 633px; height: 9px; 

	margin: 0px; padding: 0px; vertical-align: bottom; 

	position: absolute; bottom: 2px !important; bottom /**/: 0px; left: 0px;}

Neví nikdo? Potřeboval bych prosím radu co nejdřív začínám bejt z toho šílenej...

Díky moc