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

最新推荐文章于 2022-09-26 13:45:23 发布
最新推荐文章于 2022-09-26 13:45:23 发布
阅读量402 收藏
点赞数
原文链接：http://www.cnblogs.com/icewee/articles/2017689.html
版权
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>

转载于:https://www.cnblogs.com/icewee/articles/2017689.html

weixin_30372371
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
document.body.clientHeight不能正确取到浏览器页面高度
weixin_34375054的博客
02-06 9222
2019独角兽企业重金招聘Python工程师标准>>> ...
由document.body和document.documentElement想到的
09-06
1. `document.body.clientWidth`和`clientHeight`返回浏览器视口的宽度和高度，不包括滚动条。 2. `document.body.offsetWidth`和`offsetHeight`则包括了边框的宽度。 3. `document.body.scrollWidth`和`...
获取窗口可视高度window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
qq_一望损莓苔的博客
08-03 4813
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：  window.innerHeight – 浏览器窗口的内部高度  window.innerWidth – 浏览器窗口的内部宽度  对于 Internet Explorer 8、7、6、5：  document.documentElement.clientHeight  document.doc...
document.body.scrollTop总是零的原因
weixin_34392435的博客
07-20 94
原来在HTML文件头部声明了这样一句：&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;改成这样就好了：&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"...
document.body.clientHeight高度问题
hello world
09-14 1605
移动端滚屏一次滚动一屏，document.body.clientHeight本来是为了获取屏幕高度，可项目发现获取到的值非常大 经排查，应先设置body高度100%，或者使用document.documentElement.clientHeight
DOCTYPE对document.documentElement.clientHeight的影响
sb___itfk的专栏
02-05 1791
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题 了。用火狐firebug测试，发现其中一个取得页面高度的变量 bo
用document.documentElement取代document.body的原因分析
09-05
在JavaScript中，`document.body` 和 `document.documentElement` 是两个经常用来获取页面信息的对象，但它们之间存在一些重要的差异，尤其是在处理不同浏览器的兼容性问题时。`document.documentElement` 通常被...
doctype后如何获得body.clientHeight的方法
10-30
具体来说，原本归属于 `document.body` 的一些属性（如 `clientHeight`, `clientWidth`, `offsetWidth`, `offsetHeight`, `scrollWidth`, `scrollHeight`, `scrollTop`, 和 `scrollLeft`）会被重新分配给 `document....
document.body.scrollTop用法
12-16
- **document.body.clientHeight**: 表示网页可见区域的高度（不包含滚动条）。 - **document.body.offsetWidth**: 包含边框在内的网页可见区域宽度。 - **document.body.offsetHeight**: 包含边框在内的网页可见...
动态表头导致表格底部留白问题
aitengteng1的博客
09-26 516
解决动态表头的表格的底部留白问题
关于document.body.clientHeight的返回值为0的问题
Panda0218的博客
01-14 3581
有时候我们需要去获取body的高度，但是通过document.body.clientHeight却得到值是0。那么如何解决这个问题呢？ 我们只需要将html和body的css样式中添加属性height:100%;即可。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;titl...
document.body、document.documentElement和window获取视窗大小的区别
淡忘~浅思
10-03 3510
在w3school关于window对象的介绍中，介绍了获取浏览器窗口大小的三种方法（浏览器的视口，不包括工具栏和滚动条）。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari： window.innerHeight – 浏览器窗口的内部高度 window.innerWidth – 浏览器窗口的内部宽度 对于 Internet Explorer 8、7、6、5： document.documentElement.clientHe
document.body.clientHeight 和 document.documentElement.clientHeight 的区别以及tomcat中路径大小写的问题...
weixin_33893473的博客
08-12 489
1、javascript中的 document.body.clientHeight 和 document.documentElement.clientHeight 的区别 这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 b...
document.documentElement.clientHeight和document.body.clientHeight区别
weixin_33834679的博客
04-12 2992
首先了解下document HTML DOM 节点 在 HTML DOM (Document Object Model) 中 , 每一个元素都是节点: 文档是一个文档节点。 所有的HTML元素都是元素节点。 所有 HTML 属性都是属性节点。 文本插入到 HTML 元素是文本节点。are text nodes。 注释是注释节点。 Document 对象 当浏览器载入HT...
[JS]document.body.clientHeight的取值
weixin_30550271的博客
01-05 194
有时候需要取页面的底部, 就会用到document.body.clientHeight , 在HTML 标准中(这一句就能取到整个页面的高度, 不论body 的实际内容到底有多高, 例如, 1074*768 的分辨率, 页面最大化时, 这个高度约为720 , 即使页面上只有一句"hello world" , 也仍然取到720. 可是在XHTML中, 如果body 体中只有一行, 则documen...
js获取宽度 ，各种高度宽度document.body.clientWidth ， document.body.clientHeight，window.screen.width 等等
gayayzy的专栏
09-14 6198
关键字: js获取宽度 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.
js获取浏览器基本信息：document.body.clientWidth/clientHeight/scrollWidth/scrollTop。
热门推荐
zjlovety的专栏
07-28 3万+
网页可见区域宽：document.body.clientWidth网页可见区域高：document.body.clientHeight网页可见区域宽：document.body.offsetWidth (包括边线的宽)网页可见区域高：document.body.offsetHei
// 可见区域高度 let clientHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
最新发布
06-13
其中，`window.innerHeight`表示浏览器窗口的内部高度，`document.documentElement.clientHeight`表示文档根元素的可见高度，`document.body.clientHeight`表示文档body元素的可见高度，三者取最小值作为可见区域...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值