使用CSS和JS获取浏览器展示区域高度的区别，记录一次遇到的坑

开发中常用的布局方案，顶部导航栏或底部导航栏，中间是内容区域，内容区域要避开导航栏的高度，这样才不会产生滑动空白的问题。

最初实现方案使用CSS calc()计算属性，优点是高效，代码简洁。

height: calc(100% - 80px);  // 减去导航栏高度

缺点很致命，100%或100vh获取的是包括浏览器顶部和底部导航栏区域的数值，也就是手机屏幕的范围（不包括手机系统导航栏），导致内容区域被浏览器导航栏遮掩的问题。使用js可以完美解决。

js实现方案

简单来说就是利用js获取屏幕可视区域（不包括浏览器导航栏），然后减去应用导航栏的高度，即可实现。（此为React中实现代码，可根据自己使用场景自行拓展）

style={{
    height : util.getWindowHeight() - 50
}}

/**
 * 获取浏览器窗口尺寸，兼容所有浏览器方法
 * @returns {number}
 */
getWindowHeight()
{
    return document.documentElement.clientHeight || window.innerHeight || document.body.clientHeight;
}