ios上使用100vh隐藏的问题

背景

在开发H5页面时，本地调试用mac浏览器的f12 移动端模式，经历几天的开发终于完成，样式、布局很nice，没啥问题。当在真机上看实际效果，我滴个乖乖，底部按钮咋没了，这让我咋点击呀…过几天就要提测，抓紧google尝试各种解决办法。（之前都是在app上内嵌的h5，没太注意到在浏览器的场景）

经过google搜索，发现16年相关的帖子，现在还有人不断评论，可见这个问题有不少人踩过坑，并且各大浏览器厂商多多少少有过了解，但一直没有修复，可见有多顾虑。接下里就一起来探索 “好端端的h5页面，怎么到了手机上，底部按钮就丢了？”

解释

100vh：
表示浏览器的最大视口高度，部分浏览器会包含底部功能区的高度，就导致了部分机型上会高于文档的可见部分。（当滑动浏览器时搜索栏部分会收起，会让可视区域变大。）

100%：
针对父元素的百分比。如果 body 没有设置明确的高度，那么 100% 会相对于其最近的非静态定位的祖先元素，如果没有这样的祖先元素，它将相对于初始包含块（通常是可视区域高度，不包含功能区高度）。

浏览器厂商考虑的因素
webkit官网回应该行为符合预期，大致解释：当在浏览器滚动时，可见区域是会动态变化（花了很长时间实现的效果）。如果我们相应地更新CSS视口高度，我们需要在滚动期间更新布局，效果是很糟糕的。而且使用更大的视口高度看起来更棒。
根据时间线对该bug了解跟进：https://nicolas-hoizey.com/articles/2015/02/18/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers/

解决方案

1. 最外部弃用100vh，改用100% （推荐）
   body设置成100vh，内部滑动时会将搜索栏收起，让可视区域变大，效果更好
   body设置成100%，内部滑动时搜索栏固定不会变化，可视区域不会改变
2. fill-available（不建议）
   google搜索css设置 fill-available，网上都在说设置该样式后会导致一些属性不能正常使用。
3. js自实现

<script>
  (function () {
    const el = document.getElementById('app');
    el.style.minHeight = window.innerHeight + 'px';
  })();
</script>

参考资料

你不应该依赖CSS 100vh，这就是原因!
CSS3 100vh not constant in mobile browser