记录--一行代码修复100vh bug

这篇具有很好参考价值的文章主要介绍了记录--一行代码修复100vh bug。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助

记录--一行代码修复100vh bug

你知道奇怪的移动视口错误(也称为100vh bug)吗?或者如何以正确的方式创建全屏块?

一、100vh bug

什么是移动视口错误?

你是否曾经在网页上创建过全屏元素?只需添加一行 CSS 并不难:

.my-page {
     height: 100vh
} 

1vh是视口高度的1% ,正是我们所需要的。但当我们在移动设备上测试时,就会出现问题。移动浏览器的视口可以动态改变,但值保持不变。因此在移动浏览器中vh变成静态值并且不反映视口的实际高度。

在下图中,可以看到移动屏幕的两种状态:

带有隐藏的地址栏

具有可见的地址栏

记录--一行代码修复100vh bug

核心问题是移动浏览器(Chrome 和 Safari)有一个“有用”的功能,地址栏有时可见,有时隐藏,从而改变视口的可见大小。这些浏览器并没有随着视口高度的变化而将高度调整100vh为屏幕的可见部分,而是将100vh地址栏设置为隐藏地址的浏览器高度。结果是,当地址栏可见时,屏幕的底部将被切断,从而违背了100vh最初的目的。

有什么方法可以解决这个问题?

二、常规修复

1. CSS + Javascript

使用的解决方案涉及使用CSS 自定义属性和一些Javascript。

简而言之,我们监听resize事件并在每次窗口大小更改时设置--vh自定义属性(窗口高度的1% ):

核心功能代码:

//首先获得视口高度并将其乘以1%以获得1vh单位的值
 let vh = window.innerHeight * 0.01
 // 然后,我们将——vh自定义属性中的值设置为文档的根
  document.documentElement.style.setProperty('--vh', `${vh}px`)
 // 监听resize事件 视图大小发生变化就重新计算1vh的值
  window.addEventListener('resize', () => {
     // 执行与前面相同的脚本
     let vh = window.innerHeight * 0.01
     document.documentElement.style.setProperty('--vh', `${vh}px`)
 })
<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>
body {
  background-color: #333;
}

.module {
  height: 100vh; /* 不支持自定义属性时的回退操作*/
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

2. 使用 -webkit-fill-available

.my-page { 
    background-color: #ffffff; 
    min-height: 100vh; 
    min-height: -webkit-fill-available; 
    overflow-y: scroll; 
    padding-bottom: 50px;
 }

此方法chrome浏览器中在某些情况下使用会有问题。

因此引出下文第三种方法。

3. postcss-100vh-fix

当然,你也可以使用第三方库来进行修复,具体使用可查看其官网 postcss-100vh-fix。

它适用于 Chrome( -webkit-fill-available 在某些情况下只会在 Chrome 中导致问题)、iOS/iPad/MacOS Safari 和 所有其他浏览器 。纯CSS解决方案,无需JS。

body {
  /* Footer will be hidden on iOS Safari because of bottom panel */
  height: 100vh;
}

body {
  height: 100vh;
}

/* Avoid Chrome to see Safari hack */
@supports (-webkit-touch-callout: none) {
  body {
    /* The hack for Safari */
    height: -webkit-fill-available;
  }
}

此方法不适用于部分高度,例如height: 90vh 或height: calc(100vh - 60px)

三、更好的方法

根据CSS Values 4 规范:视口相对长度,我们可以使用新的视口单位。

有一个dvh单位可以完成全部工作。它始终会适应视口大小。最后,浏览器支持如下:

记录--一行代码修复100vh bug

 有了这个很酷的功能,解决方案变得非常简单,只需要一行 CSS:

.my-page {
     height: 100dvh
}

可以在此了解更多的动态视口单元信息,如:dvw、dvh、dvi、dvb、dvmin 和 dvmax等。

结论

如今,CSS 发展迅速,对解决前端问题有很大帮助。该dvh单位是制作视口相关高度的最佳选择。这是一个非常简单而强大的 CSS 功能,可以让你的工作变得更加轻松。

本文转载于:

https://juejin.cn/post/7313979304513552435

如果对您有所帮助,欢迎您点个关注,我会定时更新技术文档,大家一起讨论学习,一起进步。

 记录--一行代码修复100vh bug文章来源地址https://www.toymoban.com/news/detail-760187.html

到了这里,关于记录--一行代码修复100vh bug的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 找不到mfc100u.dll,无法继续执行如何修复呢?分享三个解决方法

    我想和大家分享一个常见的电脑问题:找不到mfc100u.dll,无法继续执行。这个问题可能会给我们带来很多不便,但是请不要担心,我将为大家介绍五个解决方法,帮助大家轻松修复这个问题。   mfc100u.dll是Microsoft Foundation Class (MFC)库中的一个文件,它包含了许多用于构建Windows应

    2024年02月11日
    浏览(140)
  • 计算机缺失msvcr100.dll如何修复?分享五种实测靠谱的方法

    在计算机系统的日常运行与维护过程中,我们可能会遇到一种特定的故障场景,即系统中关键性动态链接库文件msvcr100.dll的丢失。msvcr100.dll是Microsoft Visual C++ Redistributable Package的一部分,对于许多基于Windows的应用程序来说,该文件至关重要,它的缺失可能导致部分软件无法正

    2024年02月02日
    浏览(70)
  • CSS | CSS中height:100vh和height:100%的区别

    目录 1、对于设置height:100%;有下面几种情况 2、对于设置height:100vh时有如下的情况 首先,我们得知道1vh它表示的是当前屏幕可见高度的1/100,而1%它表示的是父元素长或者宽的1% 1、对于设置height:100%;有下面几种情况 (1)当父元素固定高度,子元素设置   height:100%; 时 结果如下

    2024年02月09日
    浏览(38)
  • 【无标题】 移动端解决高度设为100vh时,页面超出窗口问题

    移动端解决高度设为100vh时,页面超出窗口问题 问题引入 :在做uniapp和微信小程序项目时,在底部或者顶部存在原生tabar和导航栏时,将整个页面最外面的高度设为100vh(目的是想其撑满整个界面),结果因为tabar和导航栏高度的存在,页面设为100vh(百分百高度)过于满了,

    2024年02月15日
    浏览(39)
  • 【Python Turtle合集】有趣好玩的代码当然要分享给大家啦~(皮卡丘、玫瑰花、小黄人......)

    🚀 作者 :“程序员梨子” 🚀 **文章简介 **:本篇文章主要是写了利用Turtle库绘制四种不一样的图案的小程序! 🚀 **文章源码免费获取 : 为了感谢每一个关注我的小可爱💓每篇文章的项目源码都是无 偿分享滴💓👇👇👇👇 点这里蓝色这行字体自取,需要什么源码记得

    2023年04月13日
    浏览(55)
  • 【五、深入浅出GDB调试器】如何修复程序bug或优化代码:gdb调试器的来龙去脉与debug全方位实战详解

    GDB全称GNU symbolic debugger,它是诞生于GNU开源组织的(同时诞生的还有 GCC、Emacs 等)UNIX及UNIX-like下的调试工具,是Linux下最常用的程序调试器,GDB 支持调试多种编程语言编写的程序,包括C、C++、Go、Objective-C、OpenCL、Ada 等。但是在实际应用中,GDB 更常用来调试C和C++程序。虽然

    2023年04月17日
    浏览(95)
  • 软件工具安装遇到bug、报错不知道怎么解决?看这里!

    本文举例了几个常见的软件工具使用问题,文末会提供一些我自己整理和使用的工具资料 。 \\\"在追逐零 Bug 的路上,我们不断学习、改进,更加坚定自己的技术信念。让我们相信,每一个 Bug 都是我们成长的机会。\\\"  1、VMware虚拟机未开启虚拟化 VT-x AMD-V 英特尔 Intel CPU   AMD

    2024年02月21日
    浏览(51)
  • 找不到d3dcompiler_43.dll,无法继续执行代码。分享3个修复方法

    打开吃鸡游戏的时候,电脑突然报错“找不到d3dcompiler_43.dll,无法继续执行代码”,这个是怎么回事呢?其实D3DCompiler_43.dll是Windows操作系统中的一个动态链接库文件,它属于D3DCompiler_xx.xx.xx.xx文件的一部分,用于支持DirectX和多媒体应用程序的运行。是许多应用程序运行所必需

    2024年02月01日
    浏览(38)
  • 记录一个IDEA中使用GIT的严重BUG,导致测试分支合并到主分支,以及代码恢复解决方案

    在做项目时遇到了一个问题,就是不知道什么操作,无缘无故把test分支代码合并到了master,导致花了好长时间去恢复master分支的代码,所以研究了一下,到底是什么原因导致的这个问题 PS: 后来分析出来根本原因,确定这确实是IDEA的一个BUG,在下面会有详细描述 当我们在test分支时,

    2023年04月14日
    浏览(74)
  • 分享一个500页面给大家

    先看效果: 再看代码:

    2024年02月06日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包