开发中常用的布局方案,顶部导航栏或底部导航栏,中间是内容区域,内容区域要避开导航栏的高度,这样才不会产生滑动空白的问题。
最初实现方案使用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;
}