高度自适应_HTML

最新推荐文章于 2024-09-14 18:52:56 发布

dibi6578

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量113

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/windthunder/archive/2011/04/18/2019613.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 >

转载于:https://www.cnblogs.com/windthunder/archive/2011/04/18/2019613.html