I have been trying to get a client's website to expand to 100% height, the page in question is: http://www.fraserburghkitchens.co.uk/clearance

The joomla template file layout is like so, obviously there is a lot more but this should give you an idea of the layout.

HTML Code:
<div id="maindiv">
	<div id="container">
        <div id="wrapper1">
        </div><!--End of the wrapper1 -->
        <div id="wrapper2">
        </div><!--End of the wrapper2 -->
        <div id="wrapper3"> 
	</div><!--End of the wrapper3 -->
        <div id="wrapper4">
     </div><!--End of the container -->
</div> <!--End of the maindiv -->
This is the CSS:

body{background:url(../images/body_bg.png) repeat scroll 0 0 #727272; margin:0; font-family: "Bliss ExtraLight",'Gill Sans',Calibri,'Helvetica Neue',Arial,sans-serif; font-size:14px; color:#333333;}

#maindiv{ margin:0 auto; width:961px;}

#container{background:#FFFFFF; padding:10px; float:left; width:98%; height:100%; min-height:100%;}

#wrapper1{float:left; width:100%;}

#wrapper2{float:left; width:100%;}

#wrapper3{float:left; width:100%;}
I have tried various methods I have used in the past but nothing seems to be working, I have set the height the min-height on the usual like the body, html etc

I have been trying to insert a <div> between wrapper3 and wrapper4 but it wont seem to push wrapper 4 down, I thought it was a "Clear:both" issue but it doesn't appear to be, has anyone encountered anything like this before?

Also I tried the method of setting position:absolute on the parent div's as this has worked in the past but it didn't seem to make any difference, has anyone come across this type of situation before I have not had issues doing this in the past until I tried on Joomla.