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

手机浏览器使用100vh时最大高度设置错误

是指在移动设备上使用CSS的100vh单位时,可能会出现高度设置错误的问题。100vh单位表示视口的高度,即浏览器可见区域的高度。

问题原因: 这个问题通常是由于移动设备上的浏览器地址栏或底部导航栏的存在导致的。当地址栏或底部导航栏显示时,浏览器可见区域的高度会减少,而使用100vh单位设置的元素高度并不会自动适应这种变化,导致元素高度超出了可见区域。

解决方法: 为了解决这个问题,可以使用一些技巧来正确设置元素的最大高度:

  1. 使用JavaScript动态计算高度:通过JavaScript获取浏览器可见区域的高度,并将其应用于元素的最大高度。可以使用window.innerHeight属性获取可见区域的高度。
  2. 使用CSS媒体查询:使用CSS媒体查询根据设备的屏幕高度来设置元素的最大高度。可以根据不同的设备高度设置不同的样式。
  3. 使用CSS calc()函数:使用CSS的calc()函数结合视口单位来计算元素的最大高度。例如,可以使用calc(100vh - 100px)来减去地址栏或底部导航栏的高度。
  4. 使用CSS Sticky Footer技术:使用CSS Sticky Footer技术可以确保页面内容始终填充整个视口,而不会被地址栏或底部导航栏遮挡。

推荐的腾讯云相关产品: 腾讯云提供了一系列与云计算相关的产品和服务,包括云服务器、云数据库、云存储、人工智能等。以下是一些相关产品的介绍链接:

  1. 云服务器(ECS):提供弹性计算能力,可根据业务需求快速创建、部署和管理云服务器实例。详情请参考:腾讯云云服务器
  2. 云数据库(CDB):提供高性能、可扩展的数据库服务,支持主流数据库引擎,如MySQL、SQL Server等。详情请参考:腾讯云云数据库
  3. 云存储(COS):提供安全、稳定、低成本的对象存储服务,适用于存储和处理各种类型的数据。详情请参考:腾讯云云存储

请注意,以上推荐的产品仅为示例,实际选择产品时应根据具体需求进行评估和选择。

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

相关·内容

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

在移动端避免使用100vh CSS中的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!...100vh在不同的浏览器的实现方式上也有一点微妙的变化,这使得它几乎毫无用处。最好避免100vh,而是依赖javascript来设置高度,以获得完整的视口体验。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置为隐藏地址栏的浏览器高度。结果是,当地址栏可见,屏幕的底部部分将被切断,从而破坏了100vh的初衷。...如下所示: 当地址栏可见,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应该在屏幕底部的按钮被隐藏了。...更糟糕的是,当用户第一次使用手机访问网站,地址栏会显示在页面顶部,因此用户体验是很糟糕的。

2.6K21

css视口单位vw,vh的妙用(embed篇)

前天,在往博客上折腾B站视频,无意间灵机一动,想到了个好主意,就是使用vw单位,配合使用calc。...【假设父级div就是真个屏幕】,高度设置为屏幕的宽度乘以9/16。...因为刚刚【假设父级div就是真个屏幕】这样假设了下,实际用起来肯定是多种情况的,比如我的博客电脑端是有侧边栏的,文章的div也是有边距的,而手机端只有边距没有侧边栏。其实只需要做个数学题就好。...这里我得电脑端测栏加边距的宽度大约是330px,手机端的边距太小就忽略不算了 对应的css就是这样 @media only screen and (min-width:768px){ embed{height...在电脑端css加入下面的东东 max-height:100vh;/*限制视频高度最大不能超过浏览器窗口高度*/ max-width:calc(16 * 100vh/ 9);/*限制视频宽度最大不能超过浏览器窗口高度

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

    要看到这个问题,你需要在真实的手机或模拟器上查看你的应用程序。在本文中使用的 iPhone 13(iOS 15.2)进行测试,下面是结果: 图片 啥,底部按钮跑哪里去了?...顺便说一下,它在安卓手机上甚至不能按预期工作。 图片 为什么100vh问题会发生在移动设备上? 我对这个问题进行了一番调查,发现了其中的原因。简短的答案是,浏览器的工具栏高度没有被考虑在内。...仅使用 CSS 在移动设备上修复 100VH 问题 使用 vh 的目的是为了简单地创建与视口高度相等的部分。例如,当你在建立登陆页面,这很常见。...使用JavaScript修复移动设备上的100vh问题 可以使用 window 的 innerHeight 属性,将元素 height (或minHeight)设置为window.innerHeight...一些开发者喜欢根据窗口的内部高度定义一个CSS变量,并使用该变量来设计他们所需的元素。

    1.3K40

    移动端避免使用100vh

    100vh在移动浏览器中以微妙但基本的方式被破坏,这使其几乎无用。最好避免100vh ,而是依靠javascript设置高度以获得完整的视口体验。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置浏览器高度,并隐藏了地址栏。结果是,当地址栏可见,屏幕的底部将被切除。...如下所示: 当显示地址栏,由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...页面加载,将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分。如果地址栏可见,则window.innerHeight将为全屏的高度。...此外,通过在页面首次加载高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。

    2K20

    移动端避免使用100vh

    100vh在移动浏览器中以微妙但基本的方式被破坏,这使其几乎无用。最好避免100vh ,而是依靠javascript设置高度以获得完整的视口体验。...这些浏览器没有将100vh高度调整为视口高度变化时屏幕的可见部分,而是将100vh设置浏览器高度,并隐藏了地址栏。结果是,当地址栏可见,屏幕的底部将被切除。 如下所示: ?...当显示地址栏,由于移动浏览器错误地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应隐藏在屏幕底部的按钮。...页面加载,将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分。如果地址栏可见,则window.innerHeight将为全屏的高度。...此外,通过在页面首次加载高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程中,从而带来尴尬的屏幕调整大小体验。

    1.8K20

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

    100vh在移动浏览器中以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方式来获得完整的视口体验。...当视口高度变化时,这些浏览器没有将100vh高度调整为屏幕的可见部分的高度,而是将100vh设置为隐藏了地址栏的浏览器高度(其实就是100vh高度没变,但是地址栏那块把内容顶出去了一块)。...结果导致:当地址栏可见,屏幕的底部将被切断,从而破坏了开始100vh的目的。...在页面加载,将高度设置为window.innerHeight可以将高度正确设置为窗口的可见部分高度。 如果地址栏可见,则window.innerHeight将为全屏的高度。...此外,在页面首次加载高度固定为适当的大小,可以防止在使用该网站的过程中地址栏隐藏,从而带来尴尬的屏幕调整大小体验。

    1.6K30

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

    这里扩展了解下vh在移动端设备上的部分“特性” 我们依然设置body 100vh的情况下,分别打开微信内置浏览器、Safari浏览器、Google浏览器 从效果图不难看出,在Safari浏览器、Google...浏览器100vh这个方案都是不完美的,都出现了滚动条,并不能达到我们预期的可视区域的满屏高度。...作为一个cv高手,借助搜索引擎我们了解到,Safari把网址栏与工具栏算进了100vh中,是第一个通过选择根据屏幕的最大高度为vh定义固定值来更新其实现的移动浏览器之一,而后Google浏览器也效仿它。...滚动可见区域会动态变化,如果我们相应地更新CSS视口高度,则需要在滚动过程中更新布局。为了达到更好的用户体验,使用较大的视图尺寸是最好的折衷方案。...body{ height:100vh; height:calc(var(--vh,1vh)*100); } 提供备用属性,像这样就OK了,接下来我们来设置自定义变量 //获取视口高度

    1.2K20

    移动端适配

    方法1:媒体查询 这是最笨工作量最大的方法了,就是一个屏幕尺寸一个屏幕尺寸的适配,当然你没办法适配到所有的手机型号,有的手机比较奇葩,同样是5.5寸,有的矮胖,有的瘦高。...方法2:定高不定宽 对于流式布局的页面,我们只要把宽度设置为百分比,而高度设置为px,这样宽度就可以自适应,高度由于是流式布局,损失一点美感,再搭配简单的媒体查询,不会对布局造成太大的影响。...方法3:神奇的 vh、vw css3新增的单位,相对于视窗的宽度或高度100vh代表整个可视区域,不包括标题栏状态栏底栏等区域,详细的可以看一下张鑫旭大神的文章 视区相关单位vw, vh..简介以及可实际应用场景...兼容性较差,有一些浏览器不支持,很明显微信内置的浏览器并不支持这个单位,扑街! 方法4:flexible 众里寻他千百度,蓦然回首,那人却在灯火阑珊处。...以后的项目应该都会使用这个方案。

    2.2K20

    CSS | 视差滚动 | 笔记

    vh 是 css 中的一个相对长度单位, 是相对于视窗的高度100vh 就是指 元素的高度等于当前浏览器的视窗高度, 即浏览器内部的可视区域的高度大小。...vh 优势在于能够直接获取高度, 而用 % 在没有设置 body 高度的情况下, 是无法正确获得可视区域的高度的。 100vh 在不同的浏览器的实现方式上也有一点微妙的变化, 这使得它几乎毫无用处。...这些浏览器没有将 100vh高度调整为视口高度变化时屏幕的可见部分,而是将 100vh 设置为隐藏地址栏的浏览器高度。...结果是,当地址栏可见,屏幕的底部部分将被切断,从而破坏了100vh的初衷。 如下所示: 当地址栏可见,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏, 因此屏幕底部被切断。...更糟糕的是,当用户第一次使用手机访问网站,地址栏会显示在页面顶部, 因此用户体验是很糟糕的。

    73421

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

    .read_pro_inner 的宽度为 20% ,得到的效果图如下: 只截取部分图,并放大了浏览器,要不灰色部分会非常长 台子搭好了,下面就是通过 js 来动态计算 read_pro_inner...JS实现 如果我们利用 JavaScript 来实现阅读进度,我们要获取到文档的总高度、文档滚动距离、浏览器窗口的可视高度。...当滚动条滚动到底部浏览器此时仍显示一屏内容,此时滚动条无法再滚动,scrollTop 无法再增加,因此 scrollTop 的最大值是 scrollHeight- clientHeight ,如果使用.../* 100vh 浏览器视口的高度 */ background-size: 100% calc(100% - 100vh + 4px); background-repeat: no-repeat...; } 复制代码 设置盖住蓝块的白块 阅读进度条的高度为 3px ,因此设置白块的高度为 100% \- 3px,可以另外加一个 div 元素来设置白块,但小包推荐使用为元素 :before/:after

    72930

    常用的CSS样式

    自己平时整理的一些常用的 CSS 样式 设置透明度 在IE6中使用 filter: alpha(opacity = 40); 在其他浏览器使用 opacity: 0.4; 设置行高 /*\9表示兼容所有的...moz-none; -khtml-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; 使用绝对定位将子元素的宽高设置成父元素的一样...important; } 响应式布局中屏幕尺寸的表示 这里是以 iView 框架为例,不同框架的尺寸值可能不一样 xs 超小屏幕 手机 (<576px) sm 小屏幕 平板 (≥576px...) md 中等屏幕 桌面显示器 (≥768px) lg 大屏幕 大桌面显示器 (≥992px) xl 超大屏幕 (≥1200px) xxl 超级大屏幕 (≥1600px) 设置标签的高度浏览器窗口的高度....content { height: 100vh; } 背景图片铺满整个浏览器窗口 .screen { width: 100%; height: 100vh; background:

    66530

    春眠不觉晓,vh、vw、vmin、vmax 知多少

    vw and vh 1vw 等于1/100的视口宽度 (Viewport Width) 1vh 等于1/100的视口高度 (Viewport Height) 综上,一个页面而言,它的视窗的高度就是 100vh...栗子:浏览器高度900px, 1 vh = 900px/100 = 9 px。同理,如果视口宽度为750, 1vw = 750px/100 = 7.5 px。 可以想象到的,他们有很多很多的用途。....slide { height: 100vh; } 假设你要来一个和屏幕同宽的标题,你只要设置这个标题的font-size的单位为vw,那标题的字体大小就会自动根据浏览器的宽度进行缩放,以达到字体和...vmin and vmax vh和 vw 依据于视口的高度和宽度,相对的,vmin 和 vmax则关于视口高度和宽度两者的最小或者最大值 vmin — vmin的值是当前vw和vh中较小的值。...灵活使用,就可以减少很多 CSS 的代码量。

    1.1K20

    给萌新HTML5 入门指南

    一些语义化标签如section、nav在使用时和传统div并无大的区别,但这种标签更有利于搜索引擎的索引整理,利于智能手机、Pad等小屏设备适配,以及方便残障人士使用。...音频和视频,使用audio和video元素,浏览器无需安装播放插件,同时提供了播放控制API。 3....CALC计算,浏览器高度变化时自动调整。...这样的布局方式存在一些问题,就是当header、footer高度发生变化后,需要重新设置container高度,另外如果container中并列元素较多时,浮动难以控制。...body设置高度 100vh, 这里使用了CSS3 的新单位vh,即 view height 视窗高度100vh相当于html, body 高度100%,同样还有vw代表视窗宽度 body设置flex

    1.3K41

    响应式图像

    根据最新规范,如果srcset中任何图像使用了w描述符,那么必须要设置sizes属性。 2. sizes属性有两个值:第一个是媒体条件;第二个是源图尺寸值,在特定媒体条件下,此值决定了图片的宽度。...在这个例子中,我用红色边框包裹html元素,然后给section元素设置背景颜色。 ? 因为这个细微的差别,当使一个元素横跨整个页面的宽度,最好使用百分比单位而不是视口的宽度。 2....占满高度的元素:vh > % 在另一方面,当使一个元素跨越整个页面的高度,vh远比百分比单位好。...因为用百分比定义的元素的大小是由它的父元素决定的,只有父元素也填满整个屏幕的高度我们才能拥有一个填满整个屏幕的高度的元素。...然而,用vh的话,就像下面写的那么简单: .example { height: 100vh; }   不管.example元素如何嵌套,它还是能够相对于视窗尺寸设置大小。

    2.5K10

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

    1.响应式 一套适用于手机、iPad 和 PC 的代码。每次加载不同的样式,它们都能在一个项目中兼容。这就是所谓的响应性。然后,我希望产品经理能多考虑一下。...使用弹性布局 使用百分比 避免写死宽度和高度 添加滚动条 使用 rem 3.移动终端的常用宽度和高度 垂直屏幕的常见宽高比:1:2, 2:3, 3:4, 3:5, 5:8, 9:16 横向屏幕的常见宽高比...:4:3, 5:3 智能手机屏幕尺寸和分辨率列表 4.常见布局 4.1 百分比布局 当改变窗口的高度和宽度,通过给出 height, width, padding, border, 和 margin...如果为子元素的顶部和底部设置了百分比,它将相对于父元素的高度,并直接进行非静态定位(默认定位)。同样,如果为子元素的左侧和右侧设置了百分比,它将与父元素宽度的直接非静态定位(默认定位)相对应。...4.4 VW、VH 响应式布局 因为 100vw = 100 视图窗口宽度,100vh = 100 视图窗口高度,那么根据 750 的设计草案,100vw 就是 750。

    22320
    领券