移动端输入法软键盘致使定位底部的按钮位置错乱

在移动端经常会遇到fixed或者absolute定位的按钮被键盘弹出导致页面样式错乱，这个常见的问题其实用flex布局就可以避免。

<div class="container">
  <header>标题</header>
  <section>这是内容</section>  
  <footer>底部按钮</footer>
</div>

.container {
  display: flex;
  flex-direction: column;
  height: 100%;
}
header {
  flex: 0 0 auto;
  height: 1rem;
}
section {
  flex: 1 0 auto;
}
footer {
  flex: 0 0 auto;
  height: 1rem;
}

这样section的内容会随着页面高度的变化而自适应，小伙伴们别忘了height是会继承的，所以你得保证父元素的高度也是100%，比如html,body{ height: 100% }。