document.body.clientHeight 和 document.documentElement.clientHeight 的区别

     这个问题是我在整合新的美工页面的时候发现的，在整合页面的时候菜单页面始终显示不出来。但是查看源代码，里面又已经打印出来了所有的菜单。唯一的解释就是js的问题了。用火狐firebug测试，发现其中一个取得页面高度的变量 bodyHeight 一直是0。就是因为他是0，所以菜单才显示不出来。

      而取得bodyHeight 高度的语句是 var bodyHeight = document.documentElement.clientHeight;

      于是在网上查找相关的资料，结合美工页面和程序的页面对比。

      document.body.clientWidth ==> BODY对象宽度
      document.body.clientHeight ==> BODY对象高度
      document.documentElement.clientWidth ==> 可见区域宽度
      document.documentElement.clientHeight ==> 可见区域高度

      程序页面里面少了一句 http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      我在ie下做了一下测试，测试结果：

      当页面上有DOCTYPE的时候,值为

      document.body.clientHeight = 54px 
      document.documentElement.clientHeight = 729px

      当没有DOCTYPE时

      document.body.clientHeight = 729px 
      document.documentElement.clientHeight = 0px

      可以看出，document.body.clientHeight 和 document.documentElement.clientHeight 的区别。

      就是因为少了DOCTYPE 所以 document.documentElement.clientHeight 的值为0。

      而换成 document.body.clientHeight就好了。

      为什么少了DOCTYPE，document.documentElement.clientHeight会为0呢？

请看：

关于获取各种浏览器可见窗口大小的一点点研究

在我本地测试当中：
在IE、FireFox、Opera下都可以使用
document.body.clientWidth
document.body.clientHeight
即可获得，很简单，很方便。
而在公司项目当中：
Opera仍然使用
document.body.clientWidth
document.body.clientHeight
可是IE和FireFox则使用
document.documentElement.clientWidth
document.documentElement.clientHeight

原来是W3C的标准在作怪啊

如果在页面中添加这行标记的话 在IE中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
在FireFox中：
document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度
?
在Opera中： 
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）
document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）

而如果没有定义W3C的标准，则
IE为：
document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0
FireFox为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高） 
Opera为：
document.documentElement.clientWidth ==> 页面对象宽度（即BODY对象宽度加上Margin宽）document.documentElement.clientHeight ==> 页面对象高度（即BODY对象高度加上Margin高）