CSS3 100vh在移动浏览器中不是恒定的

 /* maybe i can track the issue whe it occours... */
$(function(){
  var resized = -1;
  $(window).resize(function(){
    $('#currenth').val( $('.vhbox').eq(1).height() );
    if (++resized) $('#currenth').css('background:#00c');
  })
  .resize();
}) 

 *{ margin:0; padding:0; }

/*
  this is the box which should keep constant the height...
  min-height to allow content to be taller than viewport if too much text
*/
.vhbox{
  min-height:100vh;
  position:relative;
}

.vhbox .t{
  display:table;
  position:relative;
  width:100%;
  height:100vh;
}

.vhbox .c{
  height:100%;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
} 

 <div class="vhbox" style="background-color:#c00">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
    <br>
    <!-- this input highlight if resize event is fired -->
    <input type="text" id="currenth">
  </div></div>
</div>

<div class="vhbox" style="background-color:#0c0">
  <div class="t"><div class="c">
  this div height should be 100% of viewport and keep this height when scrolling page
  </div></div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 

#1 楼

不幸的是，这是故意的...
这是一个众所周知的问题（至少在safari mobile中），这是故意的，因为它可以防止其他问题。 Benjamin Poulain回复了一个webkit错误：

这完全是故意的。为了达到这种效果，我们付出了很多工作。 :)
基本问题是：滚动时可见区域会动态变化。如果我们相应地更新CSS视口高度，则需要在滚动过程中更新布局。不仅看起来像狗屎一样，而且大多数页面几乎不可能做到60 FPS（iOS上的60 FPS是基准帧速率）。
很难向您展示“看起来像狗屎”部分，但是可以想象当您滚动时，内容在移动，屏幕上您想要的内容也在不断变化。
动态更新高度无法正常工作，我们有几种选择：在iOS上放下视口单位，像在iOS 8之前一样匹配文档大小，使用较小的视图大小，使用较大的视图大小。
根据我们的数据，使用较大的视图大小是最好的折衷方案。大多数使用视口单位的网站在大多数时候看起来都很不错。

Nicolas Hoizey对此进行了大量研究：https：//nicolas-hoizey.com/2015/02/viewport-height-is-高于某个移动浏览器中文档的可见部分。html
没有计划中的修复程序
目前，除了避免在移动设备上使用视口高度。 Chrome在2016年也更改为此：

https://groups.google.com/a/chromium.org/forum/#!topic/blink-dev/BK0oHURgmJ4
https： //developers.google.com/web/updates/2016/12/url-bar-resizing

#2 楼

您可以在CSS中尝试min-height: -webkit-fill-available;而不是100vh。应该解决

#3 楼

在我的应用中，我这样做（打字稿和嵌套的postcss，所以要相应地更改代码）：

const appHeight = () => {
    const doc = document.documentElement
    doc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()

它至少在chrome mobile和ipad上有效。什么都行不通，是当您将应用程序添加到iOS的主屏幕上并更改方向几次后-缩放级别与innerHeight值混淆了，如果找到解决方案，我可能会发布更新。

演示

#4 楼

看这个答案：https://css-tricks.com/the-trick-to-viewport-units-on-mobile/

 // First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
}); 

 body {
  background-color: #333;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
} 

 <div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div> 

#5 楼

对于我建立的许多网站，客户端都会要求提供100vh的横幅广告，正如您所发现的那样，当您开始滚动浏览时，这会导致在移动设备上出现糟糕的“跳跃”体验。这是我为在所有设备上获得平稳一致的体验而解决问题的方法：

我首先将横幅元素CSS设置为height:100vh

，然后使用jQuery来获取高度横幅元素的像素并使用此高度应用内联样式。

var viewportHeight = $('.banner').outerHeight();
$('.banner').css({ height: viewportHeight });

这样做可以解决移动设备上的问题，因为页面加载时设置了横幅元素到100vh（使用CSS），然后jQuery通过将内联CSS放在我的banner元素上来覆盖它，这会阻止它在用户开始滚动时重新调整大小。元素不会调整大小，因为由于上述jQuery，它现在具有以像素为单位设置的固定高度。为了解决这个问题，我使用“移动检测”在文档正文中添加了“移动”类。然后，我将上述jQuery包装为if语句：

if ($('body').hasClass('mobile')) {
  var viewportHeight = $('.banner').outerHeight();
  $('.banner').css({ height: viewportHeight });
}

结果，如果用户在移动设备上，则在页面的主体和上面的jQuery被执行。因此，我的banner元素只会将内联CSS应用于移动设备，而在台式机上，原始的100vh CSS规则仍然存在。

#6 楼

对我来说，这样的把戏很成功：

height: calc(100vh - calc(100vh - 100%))

#7 楼

我想出了一个React组件–检查您是否使用React或不使用它来浏览源代码，以便可以使其适应环境。

它将全屏div的高度设置为window.innerHeight，然后在窗口调整大小时对其进行更新。

#8 楼

几天来我一直在寻找解决方案，这是将VueJS与Vuetify一起使用的每个人（我的解决方案使用v-app-bar，v-navigation-drawer和v-footer）：在App.vue中使用）具有以下内容：

 .v-application {
    height: 100vh;
    height: -webkit-fill-available;
}

.v-application--wrap {
    min-height: 100vh !important;
    min-height: -webkit-fill-available !important;
} 

#9 楼

您可以通过添加以下脚本和样式来做到这一点

  function appHeight() {
    const doc = document.documentElement
    doc.style.setProperty('--vh', (window.innerHeight*.01) + 'px');
  }

  window.addEventListener('resize', appHeight);
  appHeight();

.module {
  height: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
}

#10 楼

@nils清楚地解释了这一点。

接下来是什么？

我只是回过头来在CSS中使用相对的“经典” %（百分比）。

通常要花更多的精力实现的功能比使用vh的功能要好，但是至少，您有一个相当稳定的解决方案，它可以在不同的设备和浏览器上运行，而不会出现奇怪的UI故障。

#11 楼

以下代码（使用jQuery）解决了该问题。

var vhHeight = $("body").height();
var chromeNavbarHeight = vhHeight - window.innerHeight;
$('body').css({ height: window.innerHeight, marginTop: chromeNavbarHeight });

其他元素以%为单位代替vh。

#12 楼

我刚刚发现我设计的Web应用程序在iPhone和iPad上存在此问题，并且发现了一篇文章，建议使用针对特定Apple设备的媒体查询来解决此问题。该文章中的代码在这里，但地址是这样的：http://webdesignerwall.com/tutorials/css-fix-for-ios-vh-unit-bug

引用该文章：“使用针对旧版iPhone和iPad分辨率的媒体查询将元素高度与设备高度匹配。“

他们仅添加了6个媒体查询来适应全高度元素，它应该可以正常工作完全实现了CSS。

编辑中：我现在无法测试，但是我会回来报告结果。

#13 楼

刚接触我时，我无法对其他答案发表评论。

如果有人正在寻找答案来完成这项工作（并且可以使用javascript-似乎需要使用它来完成此工作，目前），这种方法对我来说效果很好，并且也说明了移动方向的变化。我将Jquery用于示例代码，但应可与vanillaJS一起使用。

-首先，我使用脚本来检测设备是触摸还是悬停。裸露的示例：

if ("ontouchstart" in document.documentElement) {
    document.body.classList.add('touch-device');

} else {
    document.body.classList.add('hover-device');
}

这根据设备类型（悬停或触摸）将类添加到body元素，以后可用于高度脚本。

-接下来使用此代码设置设备在负载和方向变化时的高度：

if (jQuery('body').hasClass("touch-device")) {
//Loading height on touch-device
    function calcFullHeight() {
        jQuery('.hero-section').css("height", $(window).height());
    }

    (function($) {
        calcFullHeight();

        jQuery(window).on('orientationchange', function() {
            // 500ms timeout for getting the correct height after orientation change
            setTimeout(function() {
                calcFullHeight();
            }, 500);

        });
    })(jQuery);

} else {
    jQuery('.hero-section').css("height", "100vh");


}

-设置超时以便设备会在方向更改时正确计算新高度。如果没有超时，以我的经验，高度将不正确。 500ms可能过大，但对我有用。

如果浏览器覆盖CSS 100vh，则悬停设备上的100vh属于后备状态。

#14 楼

以下对我有用：

html { height: 100vh; }

body {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
}

/* this is the container you want to take the visible viewport  */
/* make sure this is top-level in body */
#your-app-container {
  height: 100%;
}

body将占据可见视口高度，而#your-app-container和height: 100%将使该容器占据可见视口高度。

#15 楼

这是我用于我的React应用程序的一种解决方法。 br />
这是一个折衷方案，但修复相对简单

#16 楼

VH 100在移动设备上无法正常运行，因为它没有考虑iOS栏（或其他平台上的类似功能）。
一种有效的解决方案是使用JavaScript“ window.innerHeight”。只需将元素的高度分配给该值，例如
$（'。element-name'）。height（window.innerHeight）;
注意：在JS中创建函数可能很有用，因此调整屏幕大小时可以改变高度。但是，我建议仅在更改屏幕宽度时才调用该函数，这样当用户向下滚动页面时，iOS栏消失时，元素的高度将不会跳跃。

#17 楼

希望这将是一个UA定义的CSS环境变量，如下所示：https://github.com/w3c/csswg-drafts/issues/2630#issuecomment-397536046

#18 楼

因为它不会被修复，所以您可以执行以下操作：

# html
<body>
  <div class="content">
    <!-- Your stuff here -->
  </div>
</body>

# css
.content {
  height: 80vh;
}

对我来说，这是比使用JavaScript更快，更纯粹的解决方案，但无法正常工作在许多设备和浏览器上。

只使用适合您需要的vh值即可。

#19 楼

在移动设备上使用vh不能与100vh一起使用，因为它们的设计选择是使用设备的整个高度，不包括任何地址栏等。

如果要查找包含div高度的布局与真实视图高度成比例，我使用以下纯css解决方案：

:root {
  --devHeight: 86vh; //*This value changes
}

.div{
    height: calc(var(--devHeight)*0.10); //change multiplier to suit required height
}

您有两个选项来设置视口高度，手动将--devHeight设置为高度可以正常工作（但您需要为要编码的每种设备类型输入此值）

或

使用javascript获取窗口高度，然后更新-在加载和刷新视口时需要devheight（但是这确实需要使用javascript而不是纯CSS解决方案）

一旦您获得了正确的视口高度，就可以以总视口高度的确切百分比创建多个div只需在每个div中更改乘数，即可将高度分配给。

0.10 =视图高度的10％
0.57 =视图高度的57％ ght

希望这可能对某人有所帮助;）

#20 楼

可以在此博客文章中找到有关该问题及其解决方案的不错的阅读：在100vh布局中寻址iOS地址栏
我最终在React应用程序中使用的解决方案是利用上面的帖子。

#21 楼

您可以尝试将position: fixed; top: 0; bottom: 0;属性赋予您的容器。

#22 楼

尝试在移动设备上使用html, body { height: 100% }达到100vh的效果。