safari对100vh的兼容问题[通俗易懂]

safari对100vh的兼容问题[通俗易懂]需求:在以下的布局要求下,利用flex布局来实现,但需要在最外层给一个固定高度来控制页面高度及可滑动区域的可视高度很自然的利用100vh来控制最外层的高度,但测试过程中,发现safari浏览器中,页面的高度出现了偏差,比屏幕的高度还要高出一部分,出现了双层滚动条。经研究,发现safari的100vh是包含地址栏和功能列的,而其它浏览器100vh才是用户浏览器真正的可见区域(见下图)解决方案通过innerHeight重新定义一个变量代替vhsafariHacks(){letwin

大家好,又见面了,我是你们的朋友全栈君。

需求:在以下的布局要求下,利用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账号...

(0)
blank

相关推荐

  • 管家婆crm9.2 sp2升级问题求助及解决方案

    管家婆crm9.2 sp2升级问题求助及解决方案

    2021年11月17日
  • 10个常用的3D建模软件,作为3D建模的软件东西很杂很碎,还需多练习才最重要「建议收藏」

    10个常用的3D建模软件,作为3D建模的软件东西很杂很碎,还需多练习才最重要「建议收藏」很多人都会好奇,电脑是怎么将手绘的2D图形变成3D的实际物品的?究竟是什么神奇魔法能够瞬间将我们的想法变成现实的呢?今天来和大家介绍下工业设计师经常会用到的10个3D建模软件。SolidworksSolidworks是工业设计师经常会用到的一款建模软件。SolidWorks是一款在MircosoftWindows上才能运行的建模计算机辅助设计和计算机辅助工程的计算机程序,由DassaultSystemes开发和发布。这是一款很常见的很普遍的工业设计建模软件,如果你以后有机会在国外找工

  • 一些有用的网站(长期记录)「建议收藏」

    一些有用的网站(长期记录)「建议收藏」1.PPT超级市场(完全免费的 PPT 模板下载网站)http://ppt.sotary.com/web/wxapp/index.html2.熊猫搜书https://ebook.huzerui.com/3.秘塔写作猫(AI智能写作工具)xiezuocat.com/4.联图云光盘(收录了很多的光盘资料的在线学习网站)http://discx.yuntu.io/5.GitMind完全免费的在线思维导图制作网站https://gitmind.cn/6.简答题(搜题)

  • linux 命令行 查找文件_shell查找文件中指定的字符串

    linux 命令行 查找文件_shell查找文件中指定的字符串一grep:查看文件内容,在文件中查询一个关键字,即搜索字符串的命令(在指定的文件中搜索符合条件的字符串)grep是包含匹配,不是完全的精确匹配,特别适合查找内容语法:grep[-option]需要搜索的关键字文件名参数:-n—-连行号一起显示-c—-统计有几行-i—-忽略大小写(一般用的少)-v—-排除指定的字符串(了解),取反,查找出来的内容是搜索条件以外的所有的内容例如:[root@localhostTEST~]#grep-n

    2022年10月21日
  • 用python画爱心的代码-Python一行代码画个爱心案例「建议收藏」

    用python画爱心的代码-Python一行代码画个爱心案例「建议收藏」昨天六一儿童节,大小朋友都过节了,真好!“人生易老天难老”,这很现实,读这句诗不期然就有一种沧桑的感觉。而要人生幸福,是需要保持一颗童心的。《三字经》开篇说“人之初,性本善”,童心就是天真,单纯而无邪。我们的身体可以老去,但可以让我们的心理年龄永远年轻,人不思老,则老将不至。拥有一颗童心,就能始终对这个世界好奇,充满想象力和创造力。拥有一颗童心,就能让我们有所“畏惧”,有所顾忌,对这个世界时刻保持…

  • SpringMVC框架理解

    SpringMVC框架理解1.Spring与Web环境集成1.1ApplicationContext应用上下文获取方式应用上下文对象是通过newClasspathXmlApplicationContext(spring配置文件)方式获取的,但是每次从容器中获得Bean时都要编写newClasspathXmlApplicationContext(spring配置文件),这样的弊端是配置文件加载多次,应用上下文对象创建多次。在Web项目中,可以使用ServletContextListener监听Web应用的启动,

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号