using javascript to set the height for the content div

       <script type="text/javascript">
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
    //IE 4 compatible
    myWidth = document.body.clientWidth;
    myHeight = (document.body.clientHeight-230);

  document.write( '<style type="text/css" media="all">');
  document.write( '#content {height:'+ myHeight +'px }');
  document.write( '</style>');
}
</script>

	<body onResize="window.location.href = window.location.href;">

<!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" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="[[PageKeywords]]" />
<title>[*pagetitle*]</title>
<link rel="stylesheet" href="[(base_url)]assets/templates/default/site.css" type="text/css" media="screen" />

<style type="text/css">

#adsie {position:fixed; top:10px; left:0;}
html {background:rgb(123,187,221);}
body {margin:0; padding:0 10px 0 10px; border:0; height:100%; overflow-y:auto; background:rgb(123,187,221);}
body {font-family: georgia, serif; font-size:16px;}
#page {margin:310px 0 50px 250px; display:block; width:500px; border:1px solid #000; background:#fff; padding:10px;}

#page .right {font-size:30px; float:right;}
#menu {display:block; top:10px; left:170px; width:130px; position:fixed; border:1px solid #888; padding:10px; text-align:center; font-weight:bold; color:#fff; background:url(grid2.gif);}
* html #menu {position:absolute;}
#menu a:visited, #menu a {display:block; width:120px; height:20px; margin:0 auto; border-top:1px solid #fff; border-bottom:1px solid #000; text-align:center; text-decoration:none; line-height:20px; color:#000;}
#menu a:hover {background:#aaa; color:#fff;}
.clear {clear:both;}
p:first-letter {font-size:25px; color:#d88;}
#fixpic {display:block; width:108px height:145px; position:fixed; bottom:0; left:0;}
* html #fixpic {position:absolute;}


/* style the outer div to give it width */
.menu {
width:750px; 
font-size:0.85em;
padding-bottom:150px;
}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {
padding:0;
margin:0;
list-style-type:none;
}
.menu ul ul {
width:150px;
}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {
float:left;
width:150px;
position:relative;
}
/* style the links for the top level */
.menu a, .menu a:visited {
display:block;
font-size:11px;
text-decoration:none; 
color:#fff; 
width:139px; 
height:30px; 
border:1px solid #fff; 
border-width:1px 1px 0 0; 
background:#758279; 
padding-left:10px; 
line-height:29px;
}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {
width:149px;
w\idth:139px;
}

/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {
background:#949e7c;
}
/* style the second level hover */
.menu ul ul a.drop:hover{
background:#c9ba65;
}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {
background:#e2dfa8;
}
/* style the third level hover */
.menu ul ul ul a:hover {
background:#b2ab9b;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {
visibility:hidden;
position:absolute;
height:0;
top:31px;
left:0; 
width:150px;
}
/* another hack for IE5.5 */
* html .menu ul ul {
top:30px;
t\op:31px;
}

/* position the third level flyout menu */
.menu ul ul ul{
left:150px; 
top:0;
width:150px;
}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {
left:-150px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
table {position:absolute; top:0; left:0;}

/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {
background:#d4d8bd; 
color:#000; 
height:auto; 
line-height:1em; 
padding:5px 10px; 
width:129px
/* yet another hack for IE5.5 */
}
* html .menu ul ul a{
width:150px;
w\idth:129px;
}


/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{
color:#fff; 
background:#949e7c;
}

/* make the second level visible when hover on first level list OR link */
.menu ul :hover ul{
visibility:visible; 
}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{
visibility:hidden;
}
/* keep the fourth level hidden when you hover on second level list OR link */
.menu ul :hover ul :hover ul ul{
visibility:hidden;
}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{ 
visibility:visible;
}
/* make the fourth level visible when you hover over third level list OR link */
.menu ul :hover ul :hover ul :hover ul { 
visibility:visible;
}

</style>
<!--[if lte IE 6]>
   <style type="text/css">
   /*<![CDATA[*/ 
html {overflow-x:auto; overflow-y:hidden;}
   /*]]>*/
   </style>
<![endif]-->

<!--[if lte IE 6]>
<style>
   /*<![CDATA[*/ 
#adsie {position:absolute; top:10px; left:0;}
   /*]]>*/
</style>
<![endif]-->
</head>

<body>



<div id="page">
<div class="right">position:fixed;</div>
<div class="clear"></div>
[*#content*]
</div>
<div id="menu">
<ul id="main_menu">

<li><a class="mm1"  accesskey="D" href="../menu/index.html"><b>DEMOS</b></a></li><li><em>MENUS</em></li><li><a class='mm3' accesskey="Y" href='../layouts/index.html'><b>LAYOUTS</b></a></li><li><a class="mm4" accesskey="B" href="../boxes/index.html"><b>BOXES</b></a></li><li><a class="mm5" accesskey="Z" href="../mozilla/index.html"><b>MOZILLA</b></a></li><li><a class="mm6" accesskey="E" href="../ie/index.html"><b>EXPLORER</b></a></li><li><a class="mm7" accesskey="O" href="../opacity/index.html"><b>OPACITY</b></a></li>
</ul>

<ul id="sub_menu">


<li class="home"><a href="../index.html"  accesskey="H" title="Home Page">Home</a></li>

<li class="first"><a href="index.html" accesskey="F" title="First">First</a></li><li class="previous"><a href="final_drop.html" accesskey="P" title="Previous">Previous</a></li><li class="next"><a href="drop_variation.html" accesskey="N" title="Next">Next</a></li><li class="last"><a href="vertical_slide.html" accesskey="L" title="Last">Last</a></li>
<li class="comments"><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=ultimate%20dropdown%20menu%20v2"  accesskey="C" title="Comments for this page">COMMENTS</a></li>
<li class="tutorial_off"> </li></ul>
</div>
</body>
</html>

function reSize() {  
	
	var frameObject		= document.getElementById('container'); // ID of element we want to stretch
	var htmlHeight 		= document.body.parentNode.scrollHeight; // Point at which the browser starts scrolling?
	var windowHeight 	= window.innerHeight; // Total size of content
		
	frameObject.style.height = '100%'; // Set our container to be 100% of it's parent (body)
	frameObject.style.minHeight = '100%'; // Set our container to be minimum 100% of it's parent (body)
	
	if (window.opera) // Check for Opera fix page load render for small containers
	{
		frameObject.style.minHeight = windowHeight + 'px'; // Set container to window height with px measurement. Opera now stretches small boxes onload.
	}
	
	if (windowHeight > htmlHeight) // If the window is bigger than the box
	{ 
		document.body.style.height = windowHeight + 'px'; // Set body height to window height
	}
	else
	{
		document.body.style.minHeight = windowHeight + 'px'; // Set body min-height to document height - need a fork for IE height?
	}
}

window.onresize = reSize;