JS获取body的高度

1、document.body.clientWidth//网页可见区域宽

2、document.body.clientHeight//网页可见区域高

3、document.body.offsetWidth//网页可见区域宽(包括边线的宽)

4、document.body.offsetHeight//网页可见区域高(包括边线的高)

5、document.body.scrollWidth//网页正文全文宽

6、window.screen.availHeight//屏幕可用工作区高度

7、window.screen.availWidth//屏幕可用工作区宽度

8、alert($(document.body).outerWidth(true))//浏览器时下窗口文档body的总宽度 包括border padding margin

9、alert($(document.body).width())//浏览器时下窗口文档body的高度

扩展资料：

1、alert($(window).height())//浏览器时下窗口可视区域高度

2、alert($(document).height())//浏览器时下窗口文档的高度

3、alert($(document.body).height())//浏览器时下窗口文档body的高度

4、alert($(document.body).outerHeight(true))//浏览器时下窗口文档body的总高度 包括border padding margin

5、alert($(window).width())//浏览器时下窗口可视区域宽度

6、alert($(document).width())//浏览器时下窗口文档对于象宽度

7、alert($(document).scrollTop())//获取滚动条到顶部的垂直高度

8、alert($(document).scrollLeft())//获取滚动条到左边的垂直宽度

javascript screen对象获取屏幕宽高如alert(screen.height)

availHeight 属性 -- 窗口可以使用的屏幕高度，单位像素

availWidth 属性 -- 窗口可以使用的屏幕宽度，单位像素

colorDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)

pixelDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持)

height 属性 -- 屏幕的高度，单位像素

width 属性 -- 屏幕的宽度，单位像素

div设置定位,宽度高度设为屏幕一般半即可，至于居中的话可以绝对定位。

当 webView 作为 UITableView 中的 tableViewHeader 的时候，因为自身本来就是一个滚动视图，所以为了避免与外部的 UITableView 滚动视图冲突，通常的做法都是保证 webView 的 contentSize 与自身的 bounds 的高度保持一直，以保证 webView 不会因为内容被隐藏造成自身的内滑动问题。

在保证自身 bounds 的高度与 contentsize 的高度始终一致的时候，通常的做法就是用 kvo 来监听 scrollView 的 contentsize 属性，然后实时更新当前的 frame 的高度。这样的做法是没问题的。但是如果 webView 页面中设置了页面的偏移 contentInset（偏移值为正值） 的话，则就因为 kvo 只更正当前的 content 的高度造成偏移的部分被更正削去的问题。

当 webView 页面加载完成之后，如果再进行重新 reload 的时候，如果 reload 的页面高度比之前的高度小，那么由于 body.scrollHeight 高度维持之前的页面高度。导致 webView 中获取的 contentSize 的高度始终为之前页面的高度，导致页面 reload 的时候出现大面积空白问题。

总结来说，两个问题：

问题一：在 contentSize 里面如果将内容的偏移量在kvo监听中添加的话，会造成页面的死循环，一直循环往复的加高度，原因是因为frame的高度永远大于 contentSize 的高度（ frame.width = contentSize.width + inset.bottom ），此时会不断的进行叠加（只加不减）

问题二：页面加载完成之后，在进行重新 reload 的时候，如果 reload 的页面高度比之前的高度少，那么 body.scrollHeight 高度维持之前的页面高度。 contentSize 高度不变导致页面reload的时候出现大面积空白。

因为在kvo中进行页面的更正，所以inset的偏移量会造成frame高度始终大于contentSize，导致contentSize始终要保持跟frame一致，而 cotentSize 变化导致 contentView 的 height 被间接增加，kvo因此又更新界面 bounds ，最终导致循环的产生。

为了避免这个问题，可以通过注入JS的方法间接的去实现页面的偏移。如下:

因为webView的 ContentSize 受 html 中的 body.scrollHeight 影响。重点是在刷新页面的时候通过js重置页面的 body.scrollHeight 的高度，可以采取如下做法：

1.去除之前的页面监听（保证重置当前 webView 的高度以及内容高度的时候，不会因为 kvo 将修改的内容又改回去）

2.重置当前 webView 的高度以及内容高度

3.通过JS注入将 body 的内容剔除并设置高度为重置的高度

4.注入完成之后，加上kvo监听内容

在进行自适应页面高度刷新的时候，有时候也会在页面加载完成之后通过获取页面的 body.scrollHeight 来获取页面高度，但是这样在有些时候是不准的，因为有些页面的内容请求是 Ajax 异步请求，界面更新在数据加载之前，那会渲染之后的界面与当前更新的页面会有偏差，所以不建议通过这个方法进行页面的更新（尤其是加载一些三方的html页面，不可控），如果是自家的页面，可以与前端小哥商量，通过 JS交互 的方法将页面渲染后的高度通过交互给我们，进而刷新页面已获取准确的页面高度。

---