ok, i got it CLOSE
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Sage Community Group</title>
<script language="javascript">
window.onresize=adjustDiv;

function adjustDiv()
{
  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;
  }
  var sage = document.getElementById("sage");
  if(myWidth<1024) sage.style.width='1024px';
	else sage.style.width='100%';
  if(myHeight<768) sage.style.height='768px';
	else sage.style.height='100%';
  
}
</script>
<style type="text/css">
	html {
		height: 100%;
		overflow: auto;
	}
	
	#sage {
		height: 100%; background-color:#F00;
	}
	body {
		height: 100%;
		margin: 0;
		padding: 0;
	}
</style>
</head>

<body onload="adjustDiv();">
  <div id="sage">
  </div>
</body>
</html>
i got it to do what i want it to do, but now, there is a vertical scrollbar there at all times because at the very bottom of the page, its like there is a 5px margin that is causing the page to be taller than just the div. i cannot get that margin to go away!