高度自适应_HTML

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
< head >
< meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
< title > Height100% </ title >
< style  type ="text/css" >
*  {  padding : 0px 0px ;  margin : 0px 0px ;   }
body  {  background :  url(body_bg.GIF) repeat ;  background-color : #CCCCCC ;  text-align : center ;  font-family : Verdana ;  font-size : 12px ;   }
#container  {  background-color : #FFFFFF ;  width : 1000px ;  margin : 0px auto ;   }
#head  {  background-color : #00CC00 ;   }
#head #headinner  {  height : 80px ;  padding : 10px 10px ;   }
#main  {  background-color : #ffffff ;   }
#main #maininner  {  padding : 10px 10px ;   }
#main #maininner #content  {  border : 1px solid #CCCCCC ;  height : 200px ;  padding : 10px 10px ;   }
#foot  {  background-color :  #FF9900 ;   }
#foot #footinner  {  padding : 10px 10px ;   }
</ style >
</ head >
< body >
< div  id ="container" >
< div  id ="head" >
     < div  id ="headinner" > head </ div >
</ div >
< div  id ="main" >
     < div  id ="maininner" >
       < div  id ="content" > main </ div >
     </ div >
</ div >
< div  id ="foot" >
     < div  id ="footinner" > foot </ div >
</ div >
</ div >
< script  type ="text/javascript" > // ??CenFun.com
function  autoHeight(){
var  h_window = self.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
var  h_head = document.getElementById( " head " ).scrollHeight;
var  h_foot = document.getElementById( " foot " ).scrollHeight;
var  h_main = document.getElementById( " maininner " ).scrollHeight;
if (h_window - h_head - h_foot > h_main){
   document.getElementById( " main " ).style.height = (h_window - h_head - h_foot) + " px " ;
} else {
   document.getElementById( " main " ).style.height = h_main + " px " ;
}
}
autoHeight();  // ??CenFun.com
window.onresize = autoHeight;
</ script >
</ body >
</ html >