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

高度: vh;在移动chrome中不能正常工作

高度: vh 是一个CSS单位,表示视口高度的百分比。它是相对于视口高度的一个相对单位。

在移动Chrome中无法正常工作可能是由于以下原因之一:

  1. 浏览器兼容性问题:不同浏览器对于CSS单位的支持程度可能不同,导致在某些浏览器中无法正常工作。可以尝试使用其他单位或者添加浏览器前缀来解决兼容性问题。
  2. 元素定位问题:如果在移动Chrome中使用高度: vh 无法正常工作,可能是由于元素的定位方式或者父元素的高度设置不正确导致的。可以检查元素的定位方式和父元素的高度设置,确保它们符合预期。
  3. 其他CSS属性的影响:某些CSS属性可能会影响高度: vh 的表现,比如盒模型属性、浮动属性等。可以检查其他CSS属性是否与高度: vh 相互冲突,导致无法正常工作。

总结起来,如果在移动Chrome中使用高度: vh 无法正常工作,可以尝试以下解决方法:

  1. 检查浏览器兼容性,尝试使用其他单位或者添加浏览器前缀。
  2. 检查元素的定位方式和父元素的高度设置。
  3. 检查其他CSS属性是否与高度: vh 相互冲突。

腾讯云相关产品和产品介绍链接地址: 腾讯云提供了丰富的云计算产品和服务,包括云服务器、云数据库、云存储等。具体可以参考腾讯云官方网站:https://cloud.tencent.com/

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

相关·内容

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

本文中使用的 iPhone 13(iOS 15.2)进行测试,下面是结果: 图片 啥,底部按钮跑哪里去了? 顺便说一下,它在安卓手机上甚至不能按预期工作。...如何修复移动设备上的100vh问题? 第一个建议是尽量少用 vh。例如,在上面的代码,你可以使用一个 sticky 按钮,避免使用vh单位。...仅使用 CSS 移动设备上修复 100VH 问题 时,使用 vh 的目的是为了简单地创建与视口高度相等的部分。例如,当你在建立登陆页面时,这很常见。...DOCTYPE html> 声明,会使 fill-available Chrome 浏览器上无法正常工作。...图片 甚至不能在安卓浏览器上工作: 图片 因此,为了解决这个问题,必须从页面删除 doctype 声明。 2.

1.3K40
  • 单屏页面响应式适配玩法

    100: Chrome 标签页高度 + 地址栏高度 + 书签栏高度 2、Windows + Chrome 然后我们再看看 Windows + Chrome 的情况,以 1366 x 768 为例..., Chrome 的网页可视区高度大概为 768 - 150 = 618px 150 = 40 + 110 40: Windows 桌面底部程序坞尺寸 110: Chrome 标签页高度 + 地址栏高度...所以不管在哪种系统下,浏览器的宽度与分辨率是保持一致的(程序坞底部的时候,程序坞左右两边一般情况对宽度没有影响),高度则根据系统及浏览器的不同各有不同,比方说 Safari 没有书签高度。...委屈委屈,但还是要兼容下,至少看起来要显示正常。...9、移动移动端用户是没法操作浏览器的,所以基本上都是标准的长宽比,用 vh 最合适不过了,或 vw。

    2K20

    移动端开发的几点建议

    页面适配 这一点不能算是建议,应该说是解决方案。...理由如下: vw vh 换算方便 1vw = 屏幕 1% 的宽度 1vh = 屏幕 1% 的高度 兼容性好 无论是在网页还是小程序,只要支持 css 就能完美兼容。...PS:页面上有 input 输入框的时候,不要使用 vh 作为计量单位,因为软键盘弹出时会压缩页面高度,如果用 vh 作为计量单位,会导致页面严重变形,此时用 vw 就没有这个风险了。...字体大小上最好使用 px,这样可以确保多个页面下显示效果一致,并且更大的屏幕能显示更多的内容。 如果不使用 px,而是使用 vw rem,则要写很多 @media 语句来兼容页面样式,工作量巨大。...设备状态栏 如果 app 移动设备上不需要全屏展示,那么 chrome 上模拟设备大小时要减去设备状态栏的高度。 当然,这一般都不会有什么问题,只是为了多加一条建议。

    97120

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

    正常而言: 1vw 等于1/100的视口宽度 (Viewport Width) 1vh 等于1/100的视口高度 (Viewport Height) vmin — vmin 的值是当前 vw 和 vh...较小的值 vmax — vw 和 vh 较大的值 vh 移动端存在重大问题!...但是,移动端,情况就不太一样了。100vh 不总是等于一屏幕的高度。有的时候,100vh 高度会出现滚动条。...根因在于: 很多浏览器,计算 100vh高度的时候,会把地址栏等相关控件的高度计算在内2 同时,很多时候,由于会弹出软键盘等操作,弹出的过程,100vh 的计算值并不会实时发生变化!...看看 CanIUse: 因此,不久的将来,全面使用 dvh 替代 vh,能有效的减少非常多因为 vh 移动端的表现而引起的问题。

    1.9K20

    移动端避免使用100vh

    100vh移动浏览器以微妙但基本的方式被破坏,这使其几乎无用。最好避免100vh ,而是依靠javascript设置高度以获得完整的视口体验。...核心问题是移动浏览器(我正在为您浏览,Chrome和Safari)具有“帮助”功能,其中地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...例如,尝试移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见,屏幕都将是视口的高度。...此外,通过页面首次加载时将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程,从而带来尴尬的屏幕调整大小体验。...遗憾的是,不依赖JavaScript的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ,但鉴于其移动设备上的局限性,最好避免使用它。

    2K20

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

    100vh带来的问题 CSS,视口单位(Viewport units)听起来不错。...100vh移动浏览器以一种微妙但基本的方式被破坏,使其几乎无用。最好避免使用100vh,而应该通过javascript设置高度的方式来获得完整的视口体验。...核心问题是移动浏览器(说的就是你,Chrome和Safari)具有“有用”功能:地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...此外,页面首次加载时将高度固定为适当的大小,可以防止使用该网站的过程地址栏隐藏,从而带来尴尬的屏幕调整大小体验。...遗憾的是,不依赖JavaScript的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。100vh是如此接近伟大(greatness),但考虑到它在移动设备上的局限性,最好避免使用它。

    1.5K30

    移动端避免使用100vh

    100vh移动浏览器以微妙但基本的方式被破坏,这使其几乎无用。最好避免100vh ,而是依靠javascript设置高度以获得完整的视口体验。...核心问题是移动浏览器(我正在为您浏览,Chrome和Safari)具有“帮助”功能,其中地址栏有时可见,有时隐藏,从而改变了视口的可见大小。...例如,尝试移动浏览器上打开wordsheet.io/demo/V3Y 。无论地址栏是否可见,屏幕都将是视口的高度。...此外,通过页面首次加载时将高度锁定在适当的位置,可以防止地址栏隐藏在使用该网站的过程,从而带来尴尬的屏幕调整大小体验。...遗憾的是,不依赖JavaScript的情况下,仍然没有一种简单的方法来使元素占据整个视口高度。 height: 100vh 非常接近 ,但鉴于其移动设备上的局限性,最好避免使用它。

    1.8K20

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

    移动端避免使用100vh CSS的Viewport单元听起来很棒。如果你想将一个元素设置成全屏高度,你可以设置高度:100vh,这样你就有了一个完美的全屏元素,它会随着视口的改变而改变大小!...100vh不同的浏览器的实现方式上也有一点微妙的变化,这使得它几乎毫无用处。最好避免100vh,而是依赖javascript来设置高度,以获得完整的视口体验。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能,地址栏有时可见,有时隐藏,改变了视口的可见大小。...如下所示: 当地址栏可见时,由于移动浏览器不正确地将100vh设置为屏幕高度而没有显示地址栏,因此屏幕底部被切断。在上图中,应该在屏幕底部的按钮被隐藏了。...遗憾的是,仍然没有一种简单的方法可以让一个元素不依赖javascript的情况下占据整个视口高度。height: 100vh是如此接近伟大,但考虑到它在移动设备上的局限性,最好避免它。

    2.5K21

    微信小程序布局单位的使用

    什么是视口(视窗)桌面端,视口桌面端,指的是浏览器的可视区域;而在移动端,它涉及3个视口:Layout Viewport(布局视口),Visual Viewport(视觉视口),Ideal Viewport...视口单位的“视口”,桌面端指的是浏览器的可视区域;移动端指的就是Viewport的Layout Viewport。 vw:viewpoint width,视口宽度,1vw等于视窗宽度的1%。...vh:viewpoint height,视口高度,1vh等于视窗高度的1%。 vw和vh是css3的新单位,是一种视窗单位,小程序也同样适用。...小程序,窗口宽度固定为100vw,将窗口宽度平均分成100份,1份是1vw 小程序,窗口高度固定为100vh ,将窗口高度平均分成100份,1份是1vh [图片.png] vmin:vw和vh较小的那个...vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome

    3K61

    Chrome 108 :发布新的 CSS 布局单位!

    最近发布的 Chrome 108 ,带来了几个新的 CSS 视口单位,下面我带大家一起来看一下: 视口(viewport)代表当前可见的计算机图形区域。...一般我们提到的视口有三种:布局视口、视觉视口、理想视口,我之前写的下面这篇文章详细介绍了视口相关的概念和原理看兴趣可以看: 关于移动端适配,你必须要知道的 响应式布局,我们经常会用到两个视口相关的单位...vw 和 vh 的较小值 vmax : 选取 vw 和 vh 的较大值 如果我们将一个元素的宽度设置为 100vw 高度设置为 100vh,它将完全覆盖视觉视口: 这些单位有很好的浏览器兼容性,...也桌面端布局得到了很好的应用。...但是,移动设备上的表现就差强人意了,移动设备的视口大小会受动态工具栏(例如地址栏和标签栏)存在与否的影响。视口大小可能会更改,但 vw 和 vh 的大小不会。

    1.6K20

    css 文字自适应大小_div自适应窗口大小

    移动元素,比如改变top,left(jquery的animate方法就是,改变top,left不一定会影响回流),或者移动元素到另外1个父元素。(重绘+回流) 4....rem移动端应用可参考淘宝的页面http://m.taobao.com (html的font-size通过动态计算获取) 页面基准320px(20px),html font-size值的计算: [javascript...vh:viewpoint height,视窗高度,1vh等于视窗高度的1%。 vmin:vw和vh较小的那个。 vmax:vw和vh较大的那个。...vw, vh, vmin, vmax:IE9+局部支持,chrome/firefox/safari/opera支持,ios safari 8+支持,android browser4.4+支持,chrome...,无法确定x高度的情况下以0.5em计算(IE11及以下均不支持,firefox/chrome/safari/opera/ios safari/android browser4.4+等均需属性加么有前缀

    3.3K20

    CSS | 视差滚动 | 笔记

    参数tz是一个 length 值,不能是百分比值。 正值会使元素沿Z轴正方向上移动,负值会使元素沿Z轴负方向上移动。...这样的移动会使层看起来更远离观察者,产生较弱的视差效果。视差滚动,这种效果可以让层看起来较小、较平面。...vh 是 css 的一个相对长度单位, 是相对于视窗的高度, 100vh 就是指 元素的高度等于当前浏览器的视窗高度, 即浏览器内部的可视区域的高度大小。...vh 优势在于能够直接获取高度, 而用 % 没有设置 body 高度的情况下, 是无法正确获得可视区域的高度的。 100vh 不同的浏览器的实现方式上也有一点微妙的变化, 这使得它几乎毫无用处。...核心问题是移动浏览器(Chrome和Safari)有一个“帮助”功能,地址栏有时可见,有时隐藏,改变了视口的可见大小。

    68721

    vw, vh视窗宽高单位的使用

    一、移动端经常用到 ? 不过“我看见你”和“我触碰你”是不一样的。正好,机缘巧合,最近又与这两个单位想见。大致琢磨了下,貌似vh这个单位可以实现我以前曾希望实现的的整体高度自适应布局。...我不想直接吐露;请跟随我的学习印记以及心理历程一起去寻找答案吧~~ 二、需要提前知道的兼容性 vw, vh, vmin(vm)这几个视区相关单位,2012年9月23号这天的兼容性为:Chrome 20...我们应该都做过或见过这样的交互:点击下图,弹框查看原始大图;或者一屏内(不能有滚动条)大图幻灯片浏览。...例如,暂未支持vh单位的FireFox 15浏览器下,点击缩略图,会看到高高的图片完全溢出在屏幕之外(没有被限制住 – 父容器没有固定高度值,因此90%打酱油): ? 连弹框一起被废掉了! ?...建议Chrome20+浏览器下查看效果(因为有range控件),点击demo页面按钮,则半透明覆盖层显现了——完整覆盖: 吐槽: 如果您在FireFox浏览器下查看本demo,会发现,FireFox

    2.5K10

    CSS Viewport 单位,很多人还不知道使用它来快速布局!

    Vmin 单位 vmin表示视口的宽度和高度的较小值,也就是vw 和 vh 的较小值。如果视口宽度大于其高度,则将根据高度计算该值。 我们以下面的例子为例。 ?...据我所知,移动设备上的最小字体大小不应该不于14px。GIF,不小于10px。...我的职业生涯,我没有使用固定高度的页脚,因为例如不同的屏幕尺寸下,此footer是不可行的。...当视口较小(移动)时,通常会减少padding 。 通过使用vmin,我们可以视口较小尺寸(宽度或高度)的基础上获得合适的顶部和底部 padding。....header { border-top: calc(2px + 0.138vw) solid $color-main; } 移动端滚动问题 移动设备存在一个常见问题,即使使用100vh,也会滚动

    3.2K30

    静态布局、自适应布局、流式布局、响应式布局、弹性布局等的概念和区别

    2、设计方法:   PC:居中布局,所有样式使用绝对宽度/高度(px),设计一个Layout,屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;   移动设备:另外建立移动网站,单独设计一个布局...移动端开发采用静态布局的两种方式:(来自:流布局与响应式网页设计有什么区别?) (1)viewport meta标签上设置width=320,页面的各个元素也采用px作为单位。...这种布局方式Web前端开发的早期历史上,用来应对不同尺寸的PC屏幕(那时屏幕尺寸的差异不会太大),在当今的移动端开发也是常用布局方式,但缺点明显:主要的问题是如果屏幕尺度跨度太大,那么相对其原始设计而言过小或过大的屏幕上不能正常显示...优点:适应pc和移动端,如果足够耐心,效果完美 缺点:(1)媒体查询是有限的,也就是可以枚举出来的,只能适应主流的宽高。(2)要匹配足够多的屏幕大小,工作量不小,设计也需要多个版本。...其实,使用vw、vh等后起之秀的单位,可以实现完美的流式布局(高度和文字大小都可以变得“流式”),弹性布局就不再必要了。

    10.5K33

    移动端适配大法

    一波还未平息,一波又来侵袭~移动端确实不用考虑IE了,各种CSS新特性也用的爽到飞起,但一座大山压了过来,那就是分辨率的适配,移动端由于展示区域比较小,因此对于页面不同分辨率手机上的展示细节也要求更加严格...因此使用这种方法时,应将JS代码放入head头部并且CSS引入之前。...b) 由于chrome的最小字体是12px,又为了计算方便,所以可以设置1rem的大小为20px 应用过程,比如我们拿到了一个750的设计稿,那么首先,将设计稿里的数值除以2,得到按手机屏幕大小布局的数值...(也就是常说的2倍图、3倍图的使用)等 四、vw、vh vw是以屏幕宽度为基准的百分比单位,1vw=1%* deviceWidth vh是以屏幕高度为基准的百分比单位,1v=1% * deviceHeight...vw,vh确实很好用,但是目前使用时仍需考虑兼容性的问题,国内一些手机自带浏览器里(比如华为)会失效,并且据说碰上X5内核时也容易踩坑 。

    2.7K20

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

    哪些不能够被继承?...这里扩展了解下vh移动端设备上的部分“特性” 我们依然设置body 100vh的情况下,分别打开微信内置浏览器、Safari浏览器、Google浏览器 从效果图不难看出,Safari浏览器、Google...浏览器100vh这个方案都是不完美的,都出现了滚动条,并不能达到我们预期的可视区域的满屏高度。...作为一个cv高手,借助搜索引擎我们了解到,Safari把网址栏与工具栏算进了100vh,是第一个通过选择根据屏幕的最大高度vh定义固定值来更新其实现的移动浏览器之一,而后Google浏览器也效仿它。..., `${vh}px`); 这样就成功:root创建了--vh的css变量 为了防止旋转屏幕功能的使用,我们需要监听窗口调整大小事件来更新我们创建的--vh值 window.addEventListener

    1.2K20
    领券