min height 100vh（在移动端避免使用100vh）
本文目录
在移动端避免使用100vh
CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度，你可以设置高度: 100vh ，这样你就有了一个完美的全屏元素，它会随着视口的改变而改变大小!遗憾的是，事实并非如此。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化，这使得它几乎毫无用处。最好避免 100vh ，而是依赖 javascript 来设置高度，以获得完整的视口体验。
核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能，地址栏有时可见，有时隐藏，改变了视口的可见大小。这些浏览器没有将 100vh 的高度调整为视口高度变化时屏幕的可见部分，而是将 100vh 设置为隐藏地址栏的浏览器高度。结果是，当地址栏可见时，屏幕的底部部分将被切断，从而破坏了 100vh 的初衷。
如下所示：
当地址栏可见时，由于移动浏览器不正确地将 100vh 设置为屏幕高度而没有显示地址栏，因此屏幕底部被切断。在上图中，应该在屏幕底部的按钮被隐藏了。更糟糕的是，当用户第一次使用手机访问网站时，地址栏会显示在页面顶部，因此用户体验是很糟糕的。
解决这个问题的一种方法是依赖javascript而不是css。当页面加载时，将高度设置为 window.innerHeight 将正确地将高度设置为窗口的可见部分。如果地址栏是可见的，那么 window.innerHeight 是全屏的高度。如果地址栏是隐藏的，那么 window.innerHeight 将是屏幕可见部分的高度，正如您所期望的那样。
${app}/src/app.vue
${app}/views/foo.vue
遗憾的是，仍然没有一种简单的方法可以让一个元素在不依赖javascript的情况下占据整个视口高度。 height: 100vh 是如此接近伟大，但考虑到它在移动设备上的局限性，最好避免它。
参考或翻译
***隐藏网址***
***隐藏网址***
CSS calc()函数与单位vh 常见height：100vh
calc() 函数属于CSS3版本内容，用于动态计算长度值。例如：width: calc(100% - 10px)；需要注意的是，运算符前后都需要保留一个空格。calc()函数支持 "+", "-", "*", "/" 运算；
举例，给一个div动态设置宽度如下:
vh，是指css中相对长度单位，表示相对视口高度（Viewport Height），1vh = 1% * 视口高度。
视口比例长度定义了相对于视口的长度大小，这是文档的可见部分。
通俗点讲，vh就是当前屏幕可见高度的1%，也就是说 height:100vh == height:100%;
100vh是width的合法值吗
不是。100vh是指大小为100单位一个vh的相对长度值，根据查询100vh官网资料显示，100vh是height值，和width的合法值是没有关系的，因此不是width的合法值。
关于height:100%和height:100vh的区别
vh就是当前屏幕可见高度的1%，也就是说
height:100vh == height:100%;
但是当元素没有内容时候，设置height:100%，该元素不会被撑开，此时高度为0，
但是设置height:100vh，该元素会被撑开屏幕高度一致。
参考链接
更多文章：
sqlite格式的视频怎么打开（.sqlite是什么文件，用什么工具打开）
2026年11月7日 05:30
element ui面试题（用element-ui ELDialog和ELTable遇见的坑）
2026年11月7日 04:40
2026年11月7日 03:30
中文自动翻译成英语的输入法（有没有一种输入法能将打出来的中文自动变成英文）
2026年11月7日 02:10
equals to（为什么有些英文句子要用的是“equals to that of” 这个that和of之间还可以加名词吗）
2026年11月7日 01:50
default values（电脑开机后出现all settings was reset to default values.）
2026年11月7日 01:20
structured reviewing翻译（软件测试的英文翻译）
2026年11月7日 00:50
2026年11月6日 22:50
2026年11月6日 22:20
2026年11月6日 21:50
