【译】ios（safari）浏览器，使用100vh会遇到的问题。
译者的话
起初会使用100vh是因为，想用flex弹性布局做出不带Navbar的中间自适应，底部导航栏固定效果的活动页。鉴于vh这个单位相当方便，是基于视口（viewport）的，100vh代表填充当前可视范围的。想着给外层包裹一层100vh的wrapper，然后给底部栏设置固定的vh数值，接着内容部分设置flex:1 从而实现自适应了。想不到在ios上会出现bug，结果在medium找到这篇文章，并且此文也给出解决方案，值得一看。
100vh
快速回顾。vh单位，在CSS3中引入，允许你指定总视口高度的百分比。100vh是视口的100%它具有移动响应能力，使得布局更加容易。
导航栏困境
让我们做一个带有footer的导航页：
<body>
<style>
/* normalize css */
* {
margin: 0;
text-align: center;
}
main,
footer {
width: 100%;
}
main {
height: 95vh;
background-color: lightblue;
}
footer {
height: 5vh;
background-color: white;
}
</style>
<main>
<h1>Hello from inside the section</h1>
</main>
<footer>
<h1>Hello from the footer</h1>
</footer>
</body>
<< · Back Index ·>>
