少见多怪，window.innerHeight竟然解决了问题！
引言
笔者所开发的一个管理平台在一款平板上的适配有问题，表现在页面没有占满屏幕，下面有留白区域。最后使用一个不熟悉的window.innerHeight解决了问题。通过阅读本文你可以了解vConsole的使用，了解有关屏幕高度、浏览器高度以及页面高度的相关属性。
可能有的同学早就接触到window.innerHeight了，其实在实际开发过程中它的使用频率还是很高的：例如下图所示的使用Three.js创建一个场景的示例：
如上图所展示的代码，在创建相机的时候给构造函数传入的长宽比参数中就使用到window.innerHeight。
问题场景
言归正传，说说笔者是如何是使用window.innnerHeight。笔者遇到的问题如下图所示：
上图为管理系统在某款平板上展示的效果，由上图可见：页面并没有占满屏幕，在下面留有空白区域。于是笔者在浏览器上进行调试并对元素进行检查，发现页面的header部分占高为68px，body部分占高为412px，其总和为480px。而模拟器所设置的浏览器尺寸为480，而下方还留有空白，如下图所示：
使用vConsole
经笔者测试，在PC浏览器上笔者使用不同的分辨率来测试管理平台，都不会出现这样的问题。唯独在演示用的某款平板电脑以及浏览器上的某些分辨率的模拟器上有问题。笔者感到很不解，一般页面没有占满浏览器全屏的原因是页面body或者html元素高度没有设置为100%，但是经过检查排除了这个原因。遇到这样的问题，笔者很不解，于是笔者请教了一下同事，同事建议使用vConsole打印一下屏幕的高度，浏览器的高度等分析一下。
笔者安装了vConsole，并使用其打印了屏幕、浏览器、HTML页面相关的高度，vConsole的导入和使用如下面的代码所示：
npm install vconsole
import VConsole from 'vconsole';
const vConsole = new VConsole();
created() {
vConsole.setSwitchPosition(20, 20);
},
下面看一下，使用vConsole打印屏幕高度的信息：
屏幕的高度
屏幕的高度是指设备的可视大小，Screen 对象包含有关客户端显示屏幕的信息。其中，height 属性声明了显示浏览器的屏幕的高度，以像素计。availHeight 属性声明了显示浏览器的屏幕的可用高度，以像素计。打印的代码如下：
const { height: screenHeight, availHeight: screenAvailHeight } = window.screen
vConsole.log.log('screen屏幕高度', screenHeight)
vConsole.log.log('screen屏幕可用高度', screenAvailHeight)
打印的结果如下：
可见屏幕的高度和可用高度一样都是480px。
浏览器的高度
浏览器的高度是指浏览器窗口的大小，则是指在浏览器窗口中看到的那部分网页面积，又叫做viewport(视口)。innerHeight 返回窗口的文档显示区的高度（浏览器内页面可用高度），如果有垂直滚动条，也包括滚动条高度。outerHeight 属性设置或返回一个窗口的外部高度，包括所有界面元素（如工具栏/滚动条）。打印的代码如下：
const { outerHeight, innerHeight } = window
vConsole.log.log('outerHeight', outerHeight)
vConsole.log.log('innerHeight', innerHeight)
打印的结果如下：
可见显示区的高度为640px，而窗口的高度为480px。此时，innnerHeight的值是大于outerHeight的值。
页面的高度
页面的高度是指一张网页的全部面积，就是它的大小。通常情况下，网页的大小由内容和CSS样式表决定。很显然，如果网页的内容能够在浏览器窗口中全部显示(也就是不出现滚动条)，那么网页的大小和浏览器窗口的大小是相等的。如果不能全部显示，则滚动浏览器窗口，可以显示出网页的各个部分。
页面也就是指HTML 文档，当浏览器载入 HTML 文档, 它就会成为 Document 对象。document对象有一个documentElement属性，用于返回文档的文档元素。HTML 文档返回对象为HTML元素，也就是说document.documentElement指的就是html元素。
打印html元素相关属性的代码如下：
const { offsetHeight, clientHeight } = document.documentElement
vConsole.log.log('offsetHeight', offsetHeight)
vConsole.log.log('clientHeight', clientHeight)
打印结果如下：
检查了一下html元素，其高度为480px，如下图所示：
在上面的代码中，打印了offsetHeight和clientHeight，下面做简要介绍：
- offsetHeight ：总高度（body的总高度），是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding）和边框（border），不包含外边距（margin），是一个整数，单位是像素 px。
- clientHeight ：展示的高度（body在浏览器内显示的区域高度），是一个只读属性，它返回该元素的像素高度，高度包含内边距（padding），不包含边框（border），外边距（margin）和滚动条，是一个整数，单位是像素 px。
其实滚动条高度是可通过浏览器内页面可用高度 - body展示高度得出，即window.innerHeight - body.clientHeight。下面看一下body的offsetHeight和clientHeight属性：
const { offsetHeight, clientHeight } = document.body
vConsole.log.log('body的总高度', offsetHeight)
vConsole.log.log('body在浏览器内的高度', clientHeight)
打印的结果如下：
解决方案
综上，经调试打印屏幕高度、浏览器高度以及页面高度信息，我们发现：960*480的浏览器模拟器上，屏幕的高度以及页面的高度都是480px，而浏览器窗口高度是480px，但是浏览器文档显示区的高度（innerHeight）是640px，所以管理系统的页面没有占满整个屏幕，而是有160px的空白区域（640px - 480px）。所以笔者尝试将html的高度设置为浏览器文档显示区的高度，代码如下：
document.documentElement.style.height = `${window.innerHeight}px`
这样做在浏览器的模拟器上可以解决问题，于是笔者发布了一个测试版本在某款平板电脑上的效果验证了一下，结果如下：
可见，页面已经占满整个屏幕，不再有底边遮挡了。最后总结一下本文所涉及有关屏幕、浏览器以及页面高度的相关属性：
参考资料：