移动页面100vh问题

最近在写移动端页面遇到一个问题,就是写高度100vh时底部有元素没有显示(ios Safari),搜了一下,大概是移动设备浏览器中100vh是包含了顶栏和底栏的高度

相关解释是,这样设计是为了解决滚动页面时可视区高度动态变化的问题

解决方法之一是使用height: -webkit-fill-available;

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

相关:
100vh problem with iOS Safari - DEV Community
CSS fix for 100vh in mobile WebKit - Matt Smith
html - CSS3 100vh not constant in mobile browser - Stack Overflow
Viewport height is taller than the visible part of the document in some mobile browsers - Nicolas Hoizey