使用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;
}

你可能感兴趣的:(使用CSS和JS获取浏览器展示区域高度的区别,记录一次遇到的坑)