大家好,又见面了,我是你们的朋友全栈君。
需求:在以下的布局要求下,利用flex布局来实现,但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度
很自然的利用100vh来控制最外层的高度,但测试过程中,发现safari浏览器中,页面的高度出现了偏差,比屏幕的高度还要高出一部分,出现了双层滚动条。
经研究,发现safari的100vh是包含地址栏和功能列的,而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)
解决方案
通过innerHeight重新定义一个变量代替vh
safariHacks() {
let windowsVH = window.innerHeight / 100;
document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
window.addEventListener('resize', function() {
document.querySelector('.wrap').style.setProperty('--vh', windowsVH + 'px');
});
}
在mounted内调用该方法
height: 100vh; /*給 Safari 以外的瀏覽器讀取*/
height: calc(var(--vh, 1vh) * 100);
注意–vh要写在100vh下面。。。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/139676.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...