ice world

There is nothing too difficult if you put your heart into it.
posts - 104, comments - 103, trackbacks - 0, articles - 0

解决document.body.clientHeight没给你你想要的现象

Posted on 2011-04-16 02:32 IceWee 阅读(3263) 评论(1)  编辑  收藏 所属分类: CSS
HTML文档中使用了脚本控制内容的高度，所以要用到 document.body.clientHeight，但是发现结果却不是想象的那样，请教高手得来真经，是需要设置html,body样式。试试去掉红色的样式设置。脚本的功能是解决窗口进入后最大化不能自适应的问题。
 

demo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Eletric Power Integrative System</title>
<style type="text/css">
   html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
   }
</style>
<script type="text/javascript">
   function $(id) {
    return document.getElementById(id);
   }

   window.onload = window.onresize = function() {
    $('cententMain').style.height = (document.body.clientHeight - 100) + 'px'; 
    //alert($('cententMain').style.height);
   }
</script>
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
    <td>
     <div id="header" style="height:75px; background:#006F68; left:0px; top:0px; width:100%; z-index:1000"></div> 
    </td>
   </tr>
   <tr>
    <td>       
     <div id="cententMain" style="background-color:#fff; position:absolute; left:0px; top:75px; bottom:25px; width:100%; z-index:100">
      <iframe id="indexFrame" name="indexFrame" src="http://www.xjgc.com" width="100%" height="100%" frameborder="1"></iframe>
     </div> 
    </td>
   </tr>
   <tr>
    <td>
     <div id="footer" style="background:#006F68; border-top:1px solid #1291a9; height:25px; position:absolute; left:0px; bottom:0px; width:100%; z-index:1000" align="center" valign="bottom">
      <span style="font-size:11px;color:#fff;font-family:Verdana, Arial, Helvetica, sans-serif;">&copy;2008 - 2012 Icesoft</span>
     </div>
    </td>
   </tr>
</table>
</body>
</html>


Feedback

# re: 解决document.body.clientHeight没给你你想要的现象[未登录]  回复  更多评论   

2013-09-13 16:49 by 1
1

只有注册用户登录后才能发表评论。
网站导航: