移动设备上的视窗高度(100vh)会导致不需要的滚动
移动设备上的视窗高度(100vh)会导致不需要的滚动是因为移动设备上的视窗高度指的是当前可见区域的高度。当使用100vh作为元素的高度时，如果页面内容超过了视窗高度，就会出现滚动条。
这可能会导致不需要的滚动，特别是当页面的头部或底部有固定的导航栏或工具栏时。由于移动设备的地址栏和导航栏会占用一部分屏幕空间，导致视窗的高度变小，如果使用100vh作为元素高度，可能会超出屏幕可见区域，从而出现不必要的滚动。
为避免这种情况，可以考虑使用CSS属性overflow: hidden来禁止滚动，或者使用JavaScript动态计算元素的高度，以适应不同设备的视口高度。
腾讯云提供了丰富的产品和服务，包括云服务器、云存储、云数据库等，可以帮助开发者构建和部署各种应用。具体推荐的产品和介绍链接如下：
- 云服务器（CVM）：腾讯云的云服务器产品，提供灵活可扩展的虚拟服务器，满足不同规模应用的需求。了解更多：https://cloud.tencent.com/product/cvm
- 云存储（COS）：腾讯云的云存储产品，提供安全可靠的对象存储服务，适用于图片、音视频等多媒体文件的存储和管理。了解更多：https://cloud.tencent.com/product/cos
- 云数据库（CDB）：腾讯云的云数据库产品，提供高性能、可扩展的关系型数据库服务，支持MySQL、SQL Server等多种数据库引擎。了解更多：https://cloud.tencent.com/product/cdb
以上是腾讯云在云计算领域的部分产品和服务，可以帮助开发者解决在移动设备上使用视窗高度导致不需要的滚动的问题。
相关·内容
我正在为Angular 10的手机开发一个主题。 我已经使用vh来设置组件的高度。 我的应用程序相当复杂，我已经在上百个地方用vh设置了高度。对于我来说，将每个高度都更改为px's或%是不可能的。我完全意识到这个问题并不新鲜，在不同的论坛上有很多解决方案。但对我来说都不管用。 我使用了以下脚本。但我得到的错误是--vh是未定义的。body {
height: calc(var(--vh, 1vh
浏览 29提问于2021-07-25得票数 0
回答已采纳
我有一个带有几个div (class="full")的页面，我希望它和用户的视窗一样高。它可以在桌面(Ubuntu，Firefox)上运行，但不能在移动设备(Android，Chrome)上运行。我的智能手机底部有一个白色的小缝隙。 min-height: 100vh !important; min-height: 100
浏览 17提问于2018-01-25得票数 0
我有一个问题的CSS计算返回错误的值为%。position: sticky;top: calc(100vh - 1600px); <-- works as expected.因此，我可能误解了%在这个上下文中的含义(我的理
浏览 0提问于2018-06-17得票数 5
当您在移动设备上打开网站时，您可以看到背景图像取决于页面上的内容数量，其中有更多-背景图像增加，而背景图像-减少。因此，例如，当您在移动设备上打开导航面板时，您可以看到随着面板的分开和更多内容的增加，背景会急剧增加。如何使背景独立于内容的数量仅取决于查看区域。 目前在css和html中是什么？
浏览 14提问于2020-04-30得票数 2
首先，我将最外层对象html的高度设置为100%。然后，我将body的min-height设置为100%。页面有两个容器：header和article。标头的高度为90px。我确实发现，如果我在px中指定height，它可以正确扩展，但由于该站点支持移动设备，我不知道每个设备的高度。 我确实注意到，将100%更改为100vh article现在扩展到了页面底部。我相信有了height 100%，ar
浏览 39提问于2019-01-19得票数 0
我有一个响应式的nav元素。nav为position:fixed。当点击它时，它有高度(我也尝试过高度:100%) left:0 and right:0。因此，导航元素覆盖了整个屏幕。然而，在移动设备上，如果我向下滚动，浏览器地址栏(我的iPhone上的Safari和Chrome )会变短或全部消失-使视窗变得更高。然而，导航元素的高度保持不变，
浏览 4提问于2018-07-05得票数 1
我在移动设备上有一个垂直滚动的问题，页面水平滚动，主体高度设置为100vh，但是我仍然可以在移动设备上向下滚动，它只是弄乱了我的内容，并显示了一些奇怪的“加载”div body{ overflow-y: hidden; max-height: 100vh</
浏览 40提问于2019-04-16得票数 1
我有一个简单的网站有2节，有少量的内容和背景图像。在我添加id skrollr-body标签之前，一切似乎都运行得很好，但现在由于该ID包含了我所有的内容，100%的高度不再起作用。我尝试使用100vh属性，但似乎也不起作用。这似乎只是iPad上的一个问题，我知道这是因为Skrollr在ios设备上处理滚动的方式。我不知道如何才能强迫内容的部分100%显示在视窗中
浏览 2提问于2014-03-21得票数 0
2回答
Chrome移动设备中的错误视图
、、、、
我正在尝试制作响应性的移动菜单，并面临着谷歌Chrome移动浏览器和其他浏览器的视图不同的问题。见下面的截图：
我用绿色来画视口边框。这里的第一个图像是用chrome手机制作的，第二个是默认的设备浏览器。在移动IOS上，结果与上一张图像相同。红色按钮，预订工作室是固定的底部0。而且它必须总是在屏幕的底部。因此，问题是：
为什么
浏览 1提问于2017-09-05得票数 4
回答已采纳
我有一些css，它在桌面浏览器上工作得很好，但在android上的chrome上，当浏览器地址栏显示/隐藏时，滚动浏览网站会导致图像移动/调整大小。目前我使用100vh作为头部的高度，使用background-attachment: fixed和background-size: cover。根据我在下面的链接中读到的内容，100vh的大小应该总
浏览 23提问于2020-09-22得票数 3
1回答
出于某种奇怪的原因，抽屉不允许你在移动设备上滚动。这是一个。下面是我的代码： className="drawer"
containerClassName
浏览 0提问于2017-06-23得票数 1
在下面的示例中，div具有预定义的高度：300px。例如，可滚动下拉菜单的最后一个城市是Zimbawe，不会显示在iPhone 6屏幕上。我想以这样的方式更改可滚动的dropdown div，使其不指定高度，并使div在屏幕结束的地方结束。我们用于下拉列表的库是：
浏览 10提问于2018-11-26得票数 4
1回答
我有一个jquery移动页面，如下所示 <div data-role="header" class="header" data-position-- /footer -->当我在ios设备上看到这个页面时，右边总是有一个奇怪的滚动条，你可以在那里滚动一点，为什么以及如何解决这个问题。
浏览 0提问于2013-08-05得票数 1
5回答
我想防止移动chrome(尤其是iOS chrome)的下拉刷新。我的web应用程序有设备宽度和设备高度视窗的垂直平移事件，但每当平移时，由于浏览器的默认功能，移动chrome会自动刷新。此外，在Safari浏览器上，屏幕在平移事件期间滚动。我想让这些动作失效。
当然，我尝试了event.preventDefault()；和touch-action: none；但
浏览 1提问于2016-03-25得票数 37
但如果选择800px的视窗宽度，效果会更好，因为网页显示会更优化，适合显示器较小的设备。因为它要么强制所有移动设备在第一种情况下总是使用800px的视区，要么在第二种情况下使用设备上像素的物理宽度，但这也不会起作用，因为在纵向模式下(大多数人浏览移动网络和使用手机的方式)，它将是300px所以实际上我的问题是-
浏览 2提问于2011-12-31得票数 12
2回答
粘性柔性箱页脚不固定于底部
、、、、
我想在屏幕onLoad上安装整个UI，但我的页脚并没有固定在移动视图的底部。我确保使用了正确的标记。包括我使用柔性盒的前缀。我尝试使用相对定位，但仍然没有得到我想要的结果。 display: -m
浏览 0提问于2019-09-01得票数 2
回答已采纳
我有一个固定宽度的布局，它的viewport属性设置为：因此，我希望呈现的页面适合设备宽度，即使我的固定布局宽度比设备的宽度更宽我知道initial-scale=1属性，但我不需要它，因为我的布局不是流动的。我的问题是，为什么当页面内容
浏览 2提问于2014-10-24得票数 0
1回答
我正在尝试实现无限滚动。检查文档是否在底部，导致加载更多内容的函数是：这在我的电脑上运行良好，但在任何移动浏览器(iOS)上都不起作用。在我的页面的iPhone 5s上，$(document).height()报告1055，$(window).height()报告504。= 551 (105
浏览 1提问于2014-09-02得票数 2
2回答
所以我注意到移动Chrome将地址栏计算成视口高度。因此，在元素上使用height: 100vh无法工作，因为当地址栏滚动时，视口高度会发生变化。实际上，我能够在ios上看到同样的问题，但是经过进一步的调查，我意识到这发生在所有的移动Chrome浏览器上。当地址栏从视口外滚动，当滚动到视口时，视口高度会发生变化。这将导致
浏览 5提问于2016-09-08得票数 21
回答已采纳
我在页面上有一个元素，当单击它时，会向包含iframe的页面添加一个div。当使用Safari在移动设备上向上滚动页面时(当只显示容器和iframe时)，底部导航栏
浏览 41提问于2020-02-22得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
