Once and for all the issue of various heights

Whether in writing or mobile pc side end, we always encounter the height of the issue. div element height, the height of the parent element, the screen height, the height of the window, the visible range of height, etc., each Dounong disoriented, then the next step is for Baidu, so their own order a bit, a good understanding.

The visible area of the page width: document.body.clientWidth
Highly visible page area: document.body.clientHeight
Page wide visible region: document.body.offsetWidth (including edge width)
Highly visible page area: document.body.offsetHeight (including high edges)
Full body of the page width: document.body.scrollWidth
Body of the page GAO: document.body.scrollHeight
Page volume to be high: document.body.scrollTop
Web is rolled to the left: document.body.scrollLeft
On the body of the page: window.screenTop
The body of the page left: window.screenLeft
High screen resolution: window.screen.height
Wide screen resolution: window.screen.width
Screen available work area height: window.screen.availHeight
Available Workspace screen width: window.screen.availWidth

Commonly used to contain a wide border height difference document.body.offsetHeight and document.body.clientHeight, both, does not contain, it is relatively simple, Duokanjibian, practical operation it will be able to remember.

All can be on in the browser page, in the end how to move these to calculate the height of it?

1, to obtain the phone screen height


获取屏幕的高度很简单，HTML自带了screen.height，直接就可以得到屏幕的整体高度，单位是px，物理分辨率值（不是HTML的逻辑分辨率）。  
HTML5Plus里提供了plus.screen.resolutionHeight方法，也是屏幕高度，但这个值是逻辑分辨率的高度。
参考http://html5plus.org/doc/zh_cn/device.html#plus.screen

2. Gets the height of the status bar phone


顶部状态栏比较复杂，如果webview设了全屏，那么状态栏高度就为0。  
如果设置了沉浸式状态栏，状态栏透明了，虽然状态栏存在理论高度，但webview高度是全屏的。  
plus.navigator.getStatusbarHeight();这个H5+api专门获取状态栏高度。

3. Gets the height of the input method

在弹出输入法的时候，webview的高度会自动减少，留出来给软键盘，
所以输入法的高度 = 屏幕高度 - webview的高度 - 状态栏的高度
一般手机自带的输入法的高度厂商是默认的

4, Gets the height of the webview

虽然webview的getStyle可以得到webview的高度，但开发者如果不手动设置的话，默认值是100%，这个值对本文探讨的问题没有意义。我们需要px的物理高度。  
在Android里通过如下js代码可以得到webview的高度：plus.android.invoke(plus.android.currentWebview(),"getHeight")   
这是一段Native.js代码，由于Android的webview原生对象就有getHeight()方法，所以就可以直接这样调用。  
当然webview原生对象还有很多方法属性都可以调，具体参阅[Native.js入门](http://ask.dcloud.net.cn/docs/#http://ask.dcloud.net.cn/article/88)  

这属于归纳总结，我们并不需要把所有的东西全部存储在脑海里，只需要记到有此属性，会用即可!

Once and for all the issue of various heights

Guess you like