页面高度的取值与ifarme高度的自适应

在网页中使用ifarme是下下策之选，使用ifarme后需要做很多页面自适应的处理，所以能不用尽量不用。

首选需要了解js中几个属性的区别：

 

关于获取各种浏览器可见窗口大小

document.body.clientWidth

document.body.clientHeight即可获得，很简单，很方便。

而在公司项目当中：Opera仍然使用

document.body.clientWidth

document.body.clientHeight

可是IE和FireFox则使用

document.documentElement.clientWidth

document.documentElement.clientHeight

原来是W3C的标准在作怪啊http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

如果在页面中添加这行标记的话

在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高）

 

       了解这些属性以后在js中进行控制

一般有w3c的标准http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">的情况下我会用document.documentElement.clientHeight获取页面高度，然后根据这个值进行控制。

注：ifarme中width可以使用100%进行设置，在没有w3c的标准下height100%是有效的，而有w3c的标准的话页面的高度是无限长的，所以height设置为100%没有效果，需要给定一个数值。

W3C标准有很多用途，这里就不一一列举了。