首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

将高度设置为100vh可以工作,但在移动浏览器中会出现滚动条

。这是因为移动浏览器在显示网页时会考虑到浏览器的UI元素(如地址栏、工具栏等),因此100vh的高度会超出可视区域,导致出现滚动条。

解决这个问题的方法是使用CSS的calc()函数来计算视口高度减去浏览器UI元素的高度,从而得到一个适应移动浏览器的高度值。具体的CSS代码如下:

代码语言:txt
复制
body {
  height: calc(100vh - 某个值);
  overflow: hidden;
}

其中,"某个值"需要根据具体的移动浏览器和设备来调整,可以通过试验和调整来获得最佳效果。

这样设置后,页面的高度将适应移动浏览器的可视区域,不会出现滚动条。同时,通过设置overflow: hidden,可以防止用户通过滚动操作来改变页面的可视区域。

在腾讯云的产品中,推荐使用腾讯云移动浏览器适配解决方案,该解决方案可以帮助开发者解决移动浏览器适配的各种问题,包括高度设置的问题。具体的产品介绍和链接地址如下:

产品名称:腾讯云移动浏览器适配解决方案 产品介绍链接:https://cloud.tencent.com/product/mbsa

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【前端篇】前端实现滚动分屏效果

+1,正+1 i++; //滚动条向下滚动 console.log(...//移动距离-1,负-1 i--; } //改变距离顶部的距离,计算距离... 3、解读 上面代码可以拿去直接使用了,下面进行解读: 1、为了方便切换时进行高度操作,此次使用vh单位,100vh表示100%高度,1vh表示1%高度,相比px更方便自适应...3、需要注意火狐浏览器和其他浏览器不同,需要单独判断鼠标滚动方向,如上图的对于浏览器的判断,navigator.userAgent.indexOf('Firefox')方法可以用来判断当前浏览器是不是火狐浏览器...5、火狐浏览器滚动条监听事件是DOMMouseScroll,其他浏览器是mousewheel 6、 oUl.style.transition=" 0.5s ease";设置动画效果事件 7、ev.detail

17310

不要用100vh移动响应

.content { height: 100vh; } 但当在实际设备上测试我们的设计时,我们遇到了几个问题。 大部分移动端的Chrome和Firefox浏览器在顶部都有一个UI(地址栏等)。...在Safari浏览器上,地址栏在底部,这就变得更加棘手了。...不同的浏览器有不同大小的视口 移动设备计算浏览器视口(顶栏+文档+底栏)=100vh 整个文档使用 100vh 填充到页面中 问题 谷歌 已检测到滚动条问题。糟糕的用户滚动和难以浏览的内容。...解决方案 通过JS检测应用程序的高度 const documentHeight = () => { const doc = document.documentElement doc.style.setProperty...; /* fallback for Js load */ height: var(--doc-height); } 最后结果 现在没有任何额外的垂直滚动条出现,Safari也没有问题,这样的用户体验得到很大的提升

81530

vh 存在问题?试试动态视口单位之 dvh、svh、lvh

但是,在移动端,情况就不太一样了。100vh 不总是等于一屏幕的高度。有的时候,100vh 高度出现滚动条。...根因在于: 很多浏览器,在计算 100vh高度的时候,会把地址栏等相关控件的高度计算在内2 同时,很多时候,由于会弹出软键盘等操作,在弹出的过程中,100vh 的计算值并不会实时发生变化!...这也就变相导致了许多基于 100vh 想实现的效果无形中会产生很多问题。...1cqh 等于容器高度的 1% 容器查询:它给予了 CSS,在不改变浏览器视口宽度的前提下,只是根据容器的宽度变化,对布局做成调整的能力。...假期在群里看到了这样一张很有意思的图: 可以预见,未来 CSS 朝着越来越复杂、功能越来越强大继续发展,诸多新特性层出不穷。可能不再是很多人之前眼中的比较简单的一门语言。

1.8K20

弹指间,重温几个设置满屏的小技巧

vh单位定义视窗高度的百分比,那岂不是esay? body{ height:100vh; } 搞定,大功告成!...这里扩展了解下vh在移动端设备上的部分“特性” 我们依然设置body 100vh的情况下,分别打开微信内置浏览器、Safari浏览器、Google浏览器 从效果图不难看出,在Safari浏览器、Google...浏览器100vh这个方案都是不完美的,都出现滚动条,并不能达到我们预期的可视区域的满屏高度。...作为一个cv高手,借助搜索引擎我们了解到,Safari把网址栏与工具栏算进了100vh中,是第一个通过选择根据屏幕的最大高度vh定义固定值来更新其实现的移动浏览器之一,而后Google浏览器也效仿它。...通过CSS变量来设置 JavaScript是万能的,我们可以通过JS获取处理存储于CSS变量中并应用它。

1.2K20

响应式图像

(美术设计)选择 基于图像格式选择 一、固定宽度图像:基于设备像素比选择   srcset属性列出了浏览器可以选择加载的源图像池,是一个由逗号分隔的列表。...处理高度的时候,vh单位更好。 1. 占满宽度的元素: % > vw 正如我所提到的,vw单位根据视窗的宽度决定它的大小。然而,浏览器是根据浏览器的窗口计算视窗大小的,包括了滚动条的空间。...如果页面延伸超过视口的高度——滚动条出现——视窗的宽度将会大于html元素的宽度。 因此,如果你一个元素设置100vw,这个元素将会延伸到html和body元素范围之外。...然而,用vh的话,就像下面写的那么简单: .example { height: 100vh; }   不管.example元素如何嵌套,它还是能够相对于视窗尺寸设置大小。...滚动条的问题也不是一个问题,因为现在大多数页面通常不会有水平滚动条。 vh应用 全屏背景图片 vh单位一个典型的用途是用来创建一个横跨整个屏幕高度和宽度的背景图片,不管设备的大小。

2.5K10

网站自适应布局为什么我要抛弃rem,改用vw?

我们可以这样理解 100vw = window.innerwidth, 100vh = window.innerheight  在移动端我们一般都可以认为,100vw就是屏幕宽度。...若使用vw布局,就不需要再像rem那样,在js中去动态设置根元素的font-size了,sass中只需要使用这个函数做转换即可 //以iphone7尺寸@2x 750像素宽的视觉稿例 @function...百分比%是根据父元素宽度或者高度进行计算,而vw vh固定按照viewport来计算,不会受父元素宽高度影响。...100vw包括了页面滚动条宽度(页面滚动条属于viewport范围内,100vw当然包括了页面滚动条宽度)。但把body或者html设置width:100%时,是不包括页面滚动条的宽度的。...那么就会引发一个问题:pc端使用vw单位时,如果页面内容超出一屏长度,出现了纵向滚动条,同时有元素width:100vw, 则会导致出现条横向滚动条,因为元素(100vw + 滚动条宽度)超出了viewport

3.1K10

height:100vh的应用

今天改移动端页面样式的时候因为height:100vh,导致我想超出部分滚动页面的效果没有做出来。就查查这玩意是啥意思。...别人解释的height:100vh vh就是当前屏幕可见高度的1%,也就是说 height:100vh == height:100%; 但是当元素没有内容时候,设置height:100%,该元素不会被撑开...,此时高度0, 但是设置height:100vh,该元素会被撑开屏幕高度一致。...但是会出现问题。当前我的页面内容过多,需要滚动条显示的时候,滚动到最下,还是无法显示我页面的全部内容,因为我顶部有其他标签。...所以说根据情况碰一碰啥样的情况可以用…滚去打代码了 发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/140669.html原文链接:https://javaforall.cn

1K20

你不应该依赖CSS 100vh,这就是原因!

顺便说一下,它在安卓手机上甚至不能按预期工作。 图片 为什么100vh问题会发生在移动设备上? 我对这个问题进行了一番调查,发现了其中的原因。简短的答案是,浏览器的工具栏高度没有被考虑在内。...如何修复移动设备上的100vh问题? 第一个建议是尽量少用 vh。例如,在上面的代码中,你可以使用一个 sticky 按钮,避免使用vh单位。...仅使用 CSS 在移动设备上修复 100VH 问题 时,使用 vh 的目的是为了简单地创建与视口高度相等的部分。例如,当你在建立登陆页面时,这很常见。...使用JavaScript修复移动设备上的100vh问题 可以使用 window 的 innerHeight 属性,元素 height (或minHeight)设置window.innerHeight...代码如下: // 以像素单位计算1vh值 // 基于窗口的内部高度 var vh = window.innerHeight * 0.01; // CSS变量设置根元素 // 相当于1vh document.documentElement.style.setProperty

1.3K40

每个高级前端工程师都应该知道的前端布局

我不想做了设计工作,最后却说它不好看,因为我不会做设计。 2.自适应 自适应是一套代码,无论屏幕尺寸如何变化,改变的只是页面的元素尺寸,而不会出现三栏变两栏的表格变化。...使用弹性布局 使用百分比 避免写死宽度和高度 添加滚动条 使用 rem 3.移动终端的常用宽度和高度 垂直屏幕的常见宽高比:1:2, 2:3, 3:4, 3:5, 5:8, 9:16 横向屏幕的常见宽高比...如果子元素的顶部和底部设置了百分比,它将相对于父元素的高度,并直接进行非静态定位(默认定位)。同样,如果子元素的左侧和右侧设置了百分比,它将与父元素宽度的直接非静态定位(默认定位)相对应。...如果子元素的 padding 和 margin 设置百分比,无论是垂直还是水平,它们都是相对于直接父元素的宽度而言的,与父元素的高度无关。...响应式的缺点:如果有太多的样式需要在浏览器尺寸发生变化时进行更改,那么多套样式代码非常麻烦。

21120

蒙层禁止页面滚动的方案

缺点是在移动端的适配性差一些,部分安卓机型以及safari中,无法阻止底部页面滚动,另外有些机型可能需要给根节点添加overflow: hidden;样式才有效果,此外由于实际上是页面的内容给裁剪了...,所以在设置这个样式的时候滚动条会消失,而移除样式的时候滚动条又会出现,所以在视觉上是会有一定的闪烁现象的,当然也可以定制滚动条的样式,但滚动条样式就是另一个兼容性的问题了,还有同样是因为裁剪。...,如果需要在移动端进行处理的话,可以利用移动端的touch事件,来阻止默认行为,当然这是适用于移动端的方式,另外要是把手机通过蓝牙也好转接线也好接上鼠标的话,那就是另一回事了。...position: fixed,这样它就无法滚动了,当蒙层关闭时再释放,当然还有一些细节要考虑,页面固定视图后内容会回头最顶端,这里我们需要记录一下用来同步top值,这样就可以得到一个兼容移动端与PC...在示例中为了演示弹窗时不会导致视图重置到最顶端,弹窗按钮移动到了下方。 <!

6.2K21

这实现牛逼了,原来阮大佬博客的阅读进度功能这么简单

是文档的总长度,clientHeight 是浏览器显示区域的高度 图源: 慕课手记[2] 获取上面几个属性值后,阅读进度就可以通过下面的公式计算出来 readProInner.style.width...当滚动条滚动到底部时,浏览器此时仍显示一屏内容,此时滚动条无法再滚动,scrollTop 无法再增加,因此 scrollTop 的最大值是 scrollHeight- clientHeight ,如果使用...就可以从总长中删除一屏的高度 */ /* 100vh 浏览器视口的高度 */ background-size: 100% calc(100% - 100vh + 4px); background-repeat...: no-repeat; } 复制代码 设置盖住蓝块的白块 阅读进度条的高度 3px ,因此设置白块的高度 100% \- 3px,可以另外加一个 div 元素来设置白块,但小包推荐使用为元素...top 和 bottom 可以拉伸 height */ /* 设置高度 100% - 3px */ top: 3px; bottom: 0; width: 100%;

70230

移动端避免使用100vh

如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可悲的是,事实并非如此。...100vh移动浏览器中以微妙但基本的方式被破坏,这使其几乎无用。最好避免100vh ,而是依靠javascript设置高度以获得完整的视口体验。...这些浏览器没有100vh高度调整视口高度变化时屏幕的可见部分,而是100vh设置浏览器高度,并隐藏了地址栏。结果是,当地址栏可见时,屏幕的底部将被切除。 如下所示: ?...当显示地址栏时,由于移动浏览器错误地100vh设置屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...页面加载时,高度设置window.innerHeight可以高度正确设置窗口的可见部分。如果地址栏可见,则window.innerHeight将为全屏的高度

1.8K20

移动端避免使用100vh

如果要设置元素的样式以占据整个屏幕的高度,则可以设置height: 100vh,您拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可悲的是,事实并非如此。...100vh移动浏览器中以微妙但基本的方式被破坏,这使其几乎无用。最好避免100vh ,而是依靠javascript设置高度以获得完整的视口体验。...这些浏览器没有100vh高度调整视口高度变化时屏幕的可见部分,而是100vh设置浏览器高度,并隐藏了地址栏。结果是,当地址栏可见时,屏幕的底部将被切除。...如下所示: 当显示地址栏时,由于移动浏览器错误地100vh设置屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...页面加载时,高度设置window.innerHeight可以高度正确设置窗口的可见部分。如果地址栏可见,则window.innerHeight将为全屏的高度

1.9K20

避免在移动端页面中使用100vh

如果要设置一个元素的样式使它占据整个屏幕的高度,那么你可以设置height: 100vh,这样你就拥有一个完美的全屏元素,该元素会随着视口的变化而调整大小!可惜的是,事实并非如此。...100vh移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方式来获得完整的视口体验。...当视口高度变化时,这些浏览器没有100vh高度调整屏幕的可见部分的高度,而是100vh设置隐藏了地址栏的浏览器高度(其实就是100vh高度没变,但是地址栏那块把内容顶出去了一块)。...在页面加载时,高度设置window.innerHeight可以高度正确设置窗口的可见部分高度。 如果地址栏可见,则window.innerHeight将为全屏的高度。...例如,尝试在移动浏览器上打开wordsheet.io/demo/V3Y。无论地址栏是否可见,屏幕都将是视口的高度

1.5K30

CSS | 视差滚动 | 笔记

vh 优势在于能够直接获取高度, 而用 % 在没有设置 body 高度的情况下, 是无法正确获得可视区域的高度的。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化, 这使得它几乎毫无用处。...这些浏览器没有 100vh高度调整视口高度变化时屏幕的可见部分,而是 100vh 设置隐藏地址栏的浏览器高度。...结果是,当地址栏可见时,屏幕的底部部分将被切断,从而破坏了100vh的初衷。 如下所示: 当地址栏可见时,由于移动浏览器不正确地100vh设置屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...当页面加载时,高度设置 window.innerHeight 正确地高度设置窗口的可见部分。 如果地址栏是可见的,那么 window.innerHeight 是全屏的高度。...100vh可以兼容某些不支持自定义属性的浏览器

65321

移动端避免使用100vh「建议收藏」

移动端避免使用100vh CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!...这些浏览器没有100vh高度调整视口高度变化时屏幕的可见部分,而是100vh设置隐藏地址栏的浏览器高度。结果是,当地址栏可见时,屏幕的底部部分将被切断,从而破坏了100vh的初衷。...如下所示: 当地址栏可见时,由于移动浏览器不正确地100vh设置屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应该在屏幕底部的按钮被隐藏了。...当页面加载时,高度设置window.innerHeight正确地高度设置窗口的可见部分。如果地址栏是可见的,那么window.innerHeight是全屏的高度。...100vh可以兼容某些不支持自定义属性的浏览器

2.5K21

看图说话,新 CSS 单位 “svh” “dvh” 原来如此

本篇通译自:The large, small, and dynamic viewport units ---- vw 和 vh 单位是我们都比较熟悉的两个单位,100vw 和 100vh 代表着视图窗口的宽和高...我们在写移动端布局兼容的时候会经常用到它们,类似于百分比的写法; 它们有不错的兼容性: 然而有一个问题,当我们使用 100vh ,且有顶部地址栏或底部操作栏的时候,会出现溢出屏幕的情况: 当滑动滚动条的时候...,地址栏和操作栏又会搜索,此时 100vh 又会充满整个窗口: 宽度也是如此,会受滚动条宽度的影响; 为了解决这个问题,出现了两个新单位: svh、lvh s 就是 small 的缩写 l 就是 large...还有另外一个更神奇的新单位:dvh,这个 d 是 dynamic 的缩写,它是动态的: 一图胜千言: 只不过 svh 和 dvh 的支持还没有特别的好 不过将来肯定会用上的~ 因为已经厌倦了那种算顶部栏、底部狂、侧边滚动条宽度及高度的日子...svh、dvh 这个系列,再回复下另外我们可能忽视的单位: vmin、vmax vmin 是设备宽高最小的那个; vmax 则是设备宽高最大的那个; vi、vb vi 是 Viewport Inline,可以简单理解文本的走向上的宽度

2.1K40

你不知道 CSS 可以做的 4 件事

我们可以小人跑动的动作分解,拼成下面的雪碧图: 通过设置不同的background-position设置不同时间小人不通的动作 @keyframes run { 0% { background-position...❞ 2、连字符 CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。...开发中我们一定遇到过 Web 应用程序中页脚的问题,在这种情况下,具有任何块级样式的页脚在处理较长的内容时,可以正常工作但在页面较短时时就不准确了。...❝此问题出现在内容短于视口高度减去页脚高度的较短页面上。...外部容器display设为flex弹性布局,flex-flow设置方向column纵向并设置最小高度100vh 主体内容flex属性设为1 DOM节点

1.2K10

你不知道 CSS 可以做的 4 件事

我们可以小人跑动的动作分解,拼成下面的雪碧图: 通过设置不同的background-position设置不同时间小人不通的动作 @keyframes run { 0% { background-position...❞ 2、连字符 CSS 属性 hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。...开发中我们一定遇到过 Web 应用程序中页脚的问题,在这种情况下,具有任何块级样式的页脚在处理较长的内容时,可以正常工作但在页面较短时时就不准确了。...❝此问题出现在内容短于视口高度减去页脚高度的较短页面上。...外部容器display设为flex弹性布局,flex-flow设置方向column纵向并设置最小高度100vh 主体内容flex属性设为1 DOM节点

1.3K30
领券